Content Placeholder Plugin – jQuery Skeleton Loader

Content Placeholder Plugin – jQuery Skeleton Loader , 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, showing up as nonpartisan shading blocks, and are bit by bit supplanted with substance, for example, pictures, headings, and interface marks.
avnSkeleton is a jQuery plugin used to make with easy to load your webpage each section , CSS3 stimulated, Facebook breathed life into skeleton see of your web content while holding on for async data.

How to use it:

Load the jQuery Skeleton Loader plugin.

Here we include “jquery.skeleton.css” file the existing code.
We also include JavaScript file “/jquery.min.js” and “jquery.scheletrone.js” into the existing code.

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

Create a container element as this:

Here, we created a division with the class name demo and assigned an id as Skeletone.
Initialize the plugin and define the path to the external data source to be loaded into the document:
Here, we initialized the plugin with var instance and assigned the data, and they used the URL: “data.html” which is the path of the document to be loaded to the plugin.

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

</div>

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"
});

More configuration options.

ajaxData:{} : AjaxData will accepts JSON Objects, JSON stands for JavaScript Object Notation. JSON is a lightweight format which used to store the data and to transport the data. JSON is used to send the data from a server to webpages, That means The function will be used to send the data to the ajax call, Then the ajax data will pass the data on a query string.
Debug: {}: Debug log will be false in default. Debug will only accept Boolean values (0’s & 1’s). The functionality of Debug is to debug the plugin if you need.
Debug Latency will be 0 in default. It only accepts integer values.
MaskText: maskText will be true in default, and it accepts boolean values. The functionality of the maskText to mask an element when incache is true.
skelParentText: skelParentText is false in default and accepts boolean values.
removelframe: removelframe is false in default and accept the boolean values.
backgroundImage: backgroundimage will be true in default, and it will also accept Boolean values.

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');
    }
    
});

Done