Facebook-like Content Placeholder Plugin - jQuery Skeleton Loader
File Size: | 2.8 MB |
---|---|
Views Total: | 11021 |
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, // 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.