oPageLoader
What is it?
oPageLoader is an oLoader extension for webpages with huge amount of images/iframes, which take much time to load and the site doesn't look nice while loading.
This extension creates a page loader with customizable progressbar and percentage text. You can also create your own style of the oPageLoader by using update callback function.
Options
List of all options
{ backgroundColor: '#000', progressBarColor: '#f00', progressBarHeight: 3, progressBarFadeLevel: 1, showPercentage: true, percentageColor: '#fff', percentageFontSize: '30px', context: 'body', affectedElements: 'img,iframe,frame,script', ownStyle: false, style: "<div id='ownage_page_loader_text'>0%</div><div id='ownage_page_loader'></div>", lockOverflow: true, images: [], //array of additional images, such as those from css files wholeWindow: true, fadeLevel: 1, waitAfterEnd: 0, fadeOutTime: 500, //callbacks complete: false, //calls after page is loaded and animation ends completeLoad: false, //calls after page is loaded and doesn't wait till animation is over update: false }
images
Type: Array of strings
Use this when you want to include to load i.e. images from backgrounds, which are used in CSS styles or some completelly different images.
Usage:
$.oPageLoader({ images: ['images/pageBackground.jpg', 'images/menuBackground.png', 'images/someOtherImage.jpg'] });
ownStyle
Type: Boolean
If you are creating your own style, make sure to set this to true, otherwise the script will make useless operations in addition.
Callback functions
update
Type: function(Object data)
A function to be called when some new element is loaded.
Object data contains these variables:
data.total | Number of all elements that are about to load. |
data.loaded | Number of loaded elements. |
data.percentage | Calculated percentage (rounded) |
Usage:
$.oPageLoader({ update: function(data) { //here you can work //with data.percentage // data.loaded // data.total } });
Examples
Basic usage
$(function(){ $.oPageLoader(); });Open demo page
Changing colors
$(function(){ $.oPageLoader({ backgroundColor: '#fb4', fadeLevel: 0.8, percentageColor: '#444', percentageFontSize: '20px', progressBarColor: 'url(http://projects.ownage.sk/images/arrow.png) no-repeat right', progressBarHeight: 30, progressBarFadeLevel: 0.9 }); });
As you can see, you can also put an image in the progressBarColor option.
Open demo pageCreating your own style (with the update callback function)
$(function(){ $.oPageLoader({ fadeLevel: 0, ownStyle: true, style: "<div id='pbar' style='opacity:0.9;color:#fff;position:absolute;bottom:0;left:0;width:100%;background:#000;height:100%;'></div>"+ "<div id='ptext' style='opacity:0;margin-bottom:-20px;background:#fff;border-radius:50px;padding:6px;text-shadow:0px 0px 3px #fff;font-size:20px;color:#000;position:absolute;'></div>", update: function(data) { $('#pbar').stop().animate({ height: (100-data.percentage)+'%' }); $('#ptext') .html(data.percentage+'% ('+data.loaded+'/'+data.total+')') .stop().animate({ bottom: (100-data.percentage)+'%', left: '10px', opacity:0.9 }); } }); });
There are many possibilities how to style oPageLoader with style option and update callback function.
Just use your creativity and create something special. =)
Open demo page