jquery.skeleton.loader (lo scheletrone)

> A jQuery plugin to make screen skeleton loader.

> Attention: skeleton is not a tool to automatically create wireframe ... at least not yet :)





In 2013, Luke Wroblewski first discussed the drawbacks of using loading spinners in on-screen experiences, and spoke in favour of what he called “skeleton screens.”
The concept behind skeleton screens is the use of empty pages that are progressively populated with content as it becomes available — immutable regions of a page are rendered instantly on load, appearing as neutral color blocks, and are gradually replaced with content such as images, headings, and interface labels. (from this very good article)


The goal of "lo scheletrone" is to help those who want to include skeleton screens on their site, existing or new.

Contents

$3

We do care about it.

!IE | !Chrome | !Firefox | !Opera | !Safari
--- | --- | --- | --- | --- |
IE 8+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |

$3

See jquery.skeleton.loader plugin in action DEMO or here in in this pen CODEPEN:

Two quick start options are available:

* Download latest release
* Clone the repo: git@github.com:jquery.skeleton.loader.git

$3

Include the script (unless you are packaging scripts somehow else):

``html


`

Do not include the script directly from GitHub (http://raw.github.com/...). The file is being served as text/plain and as such being blocked
in Internet Explorer on Windows 7 for instance (because of the wrong MIME type). Bottom line: GitHub is not a CDN.

$3

The easiest way to use the plugin is to create a structure of element like this

`html


`html
var instance = $('#myDIV').scheletrone();
`

Lo scheletrone is ready to make for you the ajax call and replace the template:

`javascript
var instance = $('#myDIV').scheletrone({
url : "path/to/url.html",
ajaxData : { idp: 1, id: 2 } //if you have to pass data on querystring, otherwise omit it
});
`

Magic happens when you do not have the template on your home page. Lo scheletrone can make the call for you, recover the div and save it to local storage. Subsequently, the template will be retrieved from the local storage and maked like a skeleton before making the ajax call.
To do this, however, you must enter the data-attributes on the div that you want to save in cache:

`html


`javascript
var instance = $('#myDIV').scheletrone({
url : "path/to/url.html",
ajaxData : { idp: 1, id: 2 } //if you have to pass data on querystring, otherwise omit it
incache: true
});
`

It is possible to instantiate several times the plugin DEMO:

`html

`javascript
var instance = $('#myDIV').scheletrone({
url : "path/to/url.html"
});

var instancecached = $('#myDIVcached').scheletrone({
url : "path/to/url.html",
incache: true
});
`
to stop the loader use the public method stopLoader in this way:

`javascript
var instance = $('#myDIV').scheletrone('stopLoader');
`

$3

Currently this plugin supports the following options:

#### url

- Default:
- Acceptable-Values: String
- Function: The website address of the site that the plugin will call asynchronously

#### ajaxData

- Default: {}
- Acceptable-Values: Json Object
- Function: Data to send to the ajax call

#### debug.log

- Default: false
- Acceptable-Values: Boolean
- Function: If you want to debug the plugin

#### debug.latency

- Default: 0
- Acceptable-Values: Integer
- Function: The timeout that the plugin will have before injecting the data returned from the ajax call (in milliseconds)

#### removeIframe

- Default: ''
- Acceptable-Values: Boolean
- Function: Exclude the iframes of the page to be scanned (to avoid security issues)

#### selector

- Default: false
- Acceptable-Values: String
- Function: If you want to retrieve only a specific content from a loaded page use this option with a selector expression. Please refer (https://api.jquery.com/filter/).


#### backgroundImage

- Default: true
- Acceptable-Values: Boolean
- Function: To make a skeleton also the elements that contain background images

#### replaceImageWith

- Default: ''
- Acceptable-Values: String
- Function: To apply a css class to the images maked skeleton, typically to apply a placeholder. In the attached css file a class, named ".bg-image" is already available where you can add the placeholder in a base64 format

#### incache

- Default: false
- Acceptable-Values: Boolean
- Function: To cache the received asynchronous data

#### onComplete

- Default: null
- Acceptable-Values: Javascript Function
- Function: If you want a callback when the skeleton is complete

#### maskText

- Default: true
- Acceptable-Values: Boolean
- Function: If you need to mask an element's text, especially when incache is true

#### skelParentText

- Default: false
- Acceptable-Values: Boolean
- Function: By default the main element of all text type nodes (nodetype = 3) is sketched (with background = #ccc). If you want to avoid it, and in some cases it is necessary, just make the valure to false.


Example with options:

`javascript
var instance = $('#myDIV').scheletrone({
url : 'http://url/to/file',
ajaxData : {},
debug : {
log: false,
latency: 2000
},
removeIframe: true,
maskText: true,
skelParentText: false,
backgroundImage: true,
replaceImageWith: 'bg-image',
selector: '#containerSingle',
incache : false,
onComplete : function() {
console.log('default onComplete() event');
}
});
`


$3

There are several cases where it is useful to use this plugin. The first is when you have a div populated asynchronous and the data waiting is very slow. The effect you have is an empty block awaiting the data like this.


in this case you can use this code:

`javascript
var instance = $('#myDIV').scheletrone({
incache: true,
onComplete: function() {
//here you can insert the code to populate the div

}
});
`

The important thing to do is to include an attribute "data-scheletrone" on the items to be cached like this:

`html


Up

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.

`html


Up

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.

`javascript
var instance = $('#myDIV').scheletrone({
url : 'http://url/to/file',
ajaxData : {},
});
`

if you want to manipulate the data received via ajax or simply make the call use the onComplete callback function.

`javascript
var instance = $('#myDIV').scheletrone({
incache: true,
onComplete: function() {
//here you can insert the code to populate the div

}
});
`

if you want to retrieve only a specific content from the loaded page you can pass the selector on the options.

`javascript
var instance = $('#skeletone3').scheletrone({
url : "index3.html",
incache: true,
selector: '#containerSingle'
});
``