Content Placeholder Plugin – jQuery Skeleton Loader

Loading
File Size: 7.55 KB
Views Total: 2714 views
Last Update:June 18, 2022
Publish Date: September 10, 2017
Official Website: Go to website
License: MIT
Plugin Author: enbifa
Demo    Download

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

List Of Version :
  • v.1.2.0
  • v.1.2
  • v.1.1.2
  • v.1.1.0
  • v.1.0.0
  • v.0.9.0

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.