Facebook-like Content Placeholder Plugin - jQuery Skeleton Loader

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,

    // if you want to retrieve only a specific content from a loaded page use this option with a selector expression
    selector: false,

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

Changelog:

v1.2.0 (02-11-2021)

• Added the new feature with the 'selector' option to populate with a specific content from a lodead page 
• Fixed the problem with IE and remove() method

v1.1.2 (02-10-2021)

• remove() polyfill for IE

2018-10-15

• added stop loader

2017-09-29

• option incache improved

2017-09-28

• New option SkelParentText

2017-09-26

• JS update

 

---

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