A jQuery plugin to make screen skeleton loader.
Switch branches/tags
Nothing to show
Clone or download
Latest commit 18a8bdc Oct 14, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist stop loader added Oct 14, 2018
docs No commit message Oct 3, 2017
example Update example/index.html Oct 14, 2018
src stop loader added Oct 14, 2018
.DS_Store stop loader added Oct 14, 2018
.gitattributes Update .gitattributes Sep 20, 2017
README.md stop loader added Oct 14, 2018
jquery.scheletrone.js maskText added Sep 26, 2017
npm-debug.log maskText added Sep 26, 2017
package-lock.json No commit message Nov 1, 2017
package.json Update package.json Oct 14, 2018
skeleton.gif No commit message Sep 10, 2017
withoutdata.gif No commit message Sep 22, 2017

README.md

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

Browser Support

We do care about it.

IE Chrome Firefox Opera Safari
IE 8+ ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔

Getting started

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

Two quick start options are available:

Installation

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

<link href="/path/to/jquery.skeleton.css" rel="stylesheet">
<script src="/path/to/jquery.scheletrone.js"></script>

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.

Usage

skeleton gif

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

<div id="myDIV">
        <div class="mySpan" >
          <h2>Title 1</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
</div>

Lo scheletrone makes the skeleton of all the elements that have no childrens. If you want to create a simple skeleton of your DOM elements:

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

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

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:

<div id="myDIV">
        <div class="mySpan" data-scheletrone="true">
          <h2>Title 1</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
        <div class="mySpan" >
          <h2>Title 2</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
</div>

and you have to set the options incache: true:

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:

<div id="myDIV">

            <img class="avatar" src="http://lorempicsum.com/up/255/200/2">
            <div class="content">
                <h1 class="firstName">
                    <span>UP</span>
                </h1>
                <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
                </div>
            </div>
        
</div>

<div id="myDIVcached">
        <div class="mySpan" data-scheletrone="true">
          <h2>Title 1</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
        <div class="mySpan" >
          <h2>Title 2</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
</div>
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:

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

Options

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: false
  • Acceptable-Values: Boolean
  • Function: Exclude the iframes of the page to be scanned (to avoid security issues)

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:

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',
            incache : false,
            onComplete     : function() {
                console.log('default onComplete() event');
            }
});

When using lo scheletrone

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.

skeleton gif

in this case you can use this code:

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:

<div class="container2" data-scheletrone="true">
    <img class="avatar" src="http://lorempicsum.com/up/255/200/2">
    <div class="content">
        <h1 class="firstName">
            <span>Up</span>
        </h1>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
        </div>
    </div>
</div>

If you are creating a new page and want to give the skeleton screen effects, you have just create the template on the page and leave the work dirty to the Scheletrone.

<div class="container" id="myDIV">
    <img class="avatar" src="http://lorempicsum.com/up/255/200/2">
    <div class="content">
        <h1 class="firstName">
            <span>Up</span>
        </h1>
        <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur metus in nibh porttitor ultricies. Vestibulum placerat blandit interdum.
        </div>
    </div>
</div>

and

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.

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