Skip to content
A simple preloader jQuery plugin.
JavaScript HTML
Branch: master
Clone or download
Latest commit 0b41b09 Apr 1, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Update README.md Apr 1, 2015
demo.html Added demo html file Oct 27, 2014
fadeloader.jquery.json Add demo page in the manifest Nov 1, 2013
jquery.fadeloader.js Actual version Nov 1, 2013

README.md

jQuery Fadeloader v1.0.1: a simple site preloader plugin

The jQuery Fadeloader plugin lets you easily implement a preloader to your site or section, using a cascade fade in effect to show specific blocks of content (for example, you can load first the header, then the menu and finally the content).

##Demo: right here

##Usage

Fist include the required files on your page's HEAD ("easing" is optional):

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='jquery.fadeloader.js'></script>

Then assign a class name to each of your elements using the alphabet. Let's say...

<body>
	<div class="a"><img class="let" src="http://imageshack.us/a/img577/8746/80670611.jpg"></div>
	<div class="b"><img class="let" src="http://imageshack.us/a/img46/5216/37226104.jpg"></div>
	<div class="c"><img class="let" src="http://imageshack.us/a/img41/5663/51030348.jpg"></div>
	<div class="d"><img class="let" src="http://imageshack.us/a/img9/7412/73031581.jpg"></div>
	<div class="e"><img class="let" src="http://imageshack.us/a/img607/2171/14947433.jpg"></div>
	<div class="f"><img class="let" src="http://imageshack.us/a/img809/60/16218923.jpg"></div>
	<div class="g"><img class="let" src="http://imageshack.us/a/img46/5216/37226104.jpg"></div>
	<div class="h"><img class="let" src="http://imageshack.us/a/img41/5663/51030348.jpg"></div>
	<div class="i"><img class="let" src="http://imageshack.us/a/img9/7412/73031581.jpg"></div>
	<div class="j"><img class="let" src="http://imageshack.us/a/img24/6335/45762992.jpg"></div>
</body>

Now hide them all with CSS:

body > div {
	display: none;
}
	

Finally set the Fadeloader in the 'document ready' event. This is the basic usage:

$(document).ready(function() {
	$('body').fadeloader({ });
});

That's it! Enjoy.

##Reference

Option Type Default Description
mode string 'class' Selection mode. '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 integer 500 The speed of the fade effect.
easeLoad string 'linear' Defines easing. Using advanced effects requires 'JQuery Easing' plugin. Options: please visit http://api.jqueryui.com/easings/
displayType string 'block' Defines which display style for the affected elements. Options: 'block', 'inline-block', 'inline', 'table', 'inline-table', 'list-item', 'inherit', etc.
preLoader boolean true When 'true', a preloader image will be displayed until the window is completely loaded. Options: 'true' or 'false'.
preloadImg string 'loading.gif' Path to the image used as preloader. Defaul 'loading.gif' is provided along with this plugin.
preloadWidth integer 50 Width in pixels of the preloader image.
preloadHeight integer 50 Height in pixels of the preloader image.
preloadCustom 'string' (HTML only) '' Paste here your HTML to use your own preloader. Remember to set 'preloader' as the class name for the main element.
onComplete 'string' '' Callback function, executed after all ellements have been loaded.
You can’t perform that action at this time.