jQuery Plugin For Preloading Html Elements with Fade Effect - Fadeloader

Fadeloader is a simple jQuery plugin that allows to pre-load any Html elements in your document or section, with a cascade fade-in effect.

Features:

• Custom fade speed
• Displays a preload image until the window is completely loaded.
• Custom preload mode and display type.
• Easing effects supported.
• onComplete callback function supported.
• Cross-browser. Works with IE7, IE 8 and modern browsers.

See also:

• jQuery Plugin For Preloading Images With Javascript - imageloader

Basic Usage:

1. Include required javascript library files in the head section of your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.fadeloader.js"></script>

2. Include jQuery easing plugin in your document for easing effects. (OPTIONAL)

<script src='jquery.easing.min.js'></script>

3. Create a group of images you want to preload. Add a class name to each of your image using the alphabet.

<div class="a demo"><img src="1.jpg"></div>
<div class="b demo"><img src="2.jpg"></div>
<div class="c demo"><img src="3.jpg"></div>
...

4. Hide these images via CSS.

.demo {
    display: none;
}

5. Call the plugin with default options.

<script>
$(document).ready(function() {
$('body').fadeloader({
mode: 'class', //or 'children'. 'Class' would search for elements with alphabetical classes (a, b, c...) inside the parent element ('body' in this case), while 'children' would select all his children.
fadeSpeed: 500, // The speed of the fade effect.
easeLoad: 'linear', // easing options.
displayType: 'block', //  'block', 'inline-block', 'inline', 'table', 'inline-table', 'list-item', 'inherit', etc.
preloader: true, // Display a preload image until the window is completely loaded. 
preloadImg: 'loading.gif', // Path to the image used as preloader.
preloadWidth: 50, // Width in pixels of the preloader image.
preloadHeight: 50, // height in pixels of the preloader image.
preloadCustom: '', // Paste here your HTML to use your own preloader. 
onComplete: '' // Callback function, executed after all ellements have been loaded.
});
});
</script>

---

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