Facebook-like Content Placeholder Plugin - jQuery Skeleton Loader

Facebook-like Content Placeholder Plugin - jQuery Skeleton Loader
File Size: 106 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Skeleton Loader is a jQuery loader plugin used to display Facebook-style animated content placeholders while loading your page's content via AJAX requests.

How to use it:

1. Load the jQuery Skeleton Loader plugin into your document and you're ready to go.

<link href="jquery.skeleton.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.scheletrone.js"></script>

2. Create a container element as this:

<div class="demo" id="skeletone">
  
  ...

</div>

3. Initialize the plugin and define the path to the external data source to be loaded into the document.

var instance = $('#skeletone').scheletrone({
    url : "data.html"
});

4. More configuration options.

var instance = $('#skeletone').scheletrone({

    // if you have to pass data on querystring
    ajaxData: {},

    // debug options
    debug: {
        log: false,
        latency: 0
    },

    // mask an element's text, especially when incache is true
    maskText: false,

    // 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.
    skelParentText: true,

    // exclude the iframes of the page to be scanned (to avoid security issues)
    removeIframe: false,

    // contain background images
    backgroundImage: true,

    // 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
    replaceImageWith: '',

    // save the template into local storage
    incache: false,

    // callback
    onComplete: function() {
      console.info('default onComplete() event');
    }
    
});

Change log:

2017-09-29

  • option incache improved

2017-09-28

  • New option SkelParentText

2017-09-26


This awesome jQuery plugin is developed by enbifa. For more Advanced Usages, please check the demo page or visit the official website.