The effects of image loading and page loading implemented by jQuery oLoader,

The effects of image loading and page loading implemented by jQuery oLoader,

OLoader usage

Both oLoader and oPageLoader are based on jQuery. Therefore, you must load the jquery library before calling the function. The author has integrated the two plug-ins: jquery. oLoader. min. js, which has been packaged. Download the source code.
It is very easy to call jQuery oLoader. A sentence is as follows:

Copy codeThe Code is as follows:
$ ('# Element'). oLoader ();

Use oLoader to load images:

Copy codeThe Code is as follows:
$ (Function (){
$ ('Img '). oLoader ({
WaitLoad: true,
FadeLevel: 0.9,
BackgroundColor: '# fff ',
Style: 0,
Image: 'loader.gif'
});
});

Use oLoader to load pages:

Copy codeThe Code is as follows:
$ ('# Ajax'). oLoader ({
Url: 'test.html ',
UpdateOnComplete: false
});

Of course, it also provides a wide range of options and callback functions, which can be set as needed.

Copy codeThe Code is as follows:
{
Image: 'images/loader.gif ', // load the Animated image
Style: 1, // loader style
Modal: true, // modal mask. If it is false, the mask layer is not displayed.
FadeInTime: 300, // fade-in speed of the mask layer, in milliseconds
FadeOutTime: 300, // mask layer speak speed, in milliseconds
FadeLevel: 0.7, // mask layer transparency, 0-1
BackgroundColor: '# 000', // background color
ImageBgColor: '# fff', // loader Animated Image background
ImagePadding: '10 ',
ShowOnInit: true, // The initialization displays the loaded animation.
HideAfter: 0, // time in MS
Url: false, // Ajax call parameters, the same below
Type: 'get ',
Data: false,
UpdateContent: true, // whether to replace the content returned by ajax
UpdateOnComplete: true, // whether to replace the content returned by the server immediately
ShowLoader: true, // whether to display the loader Image
Effect: '', // dynamic effect, supports door, slide, doornslide
WholeWindow: false, // when true, oLoader covers the whole window
LockOverflow: false, // locks body's overflow while loading
WaitLoad: false, // The content is displayed only after the element content is loaded.
CheckIntervalTime: 100, // interval which checks for position changes
// Callback function
Complete: '', // when the animation ends, the content is loaded and called.
OnStart: '', // called when the animation starts
OnError: ''// called when an ajax request error occurs
}
OPageLoader usage
The oPageLoader can be used to implement the progress bar animation during page loading. It is also very simple to call oPageLoader, as shown below:
$ (Function (){
$. OPageLoader ();
});
OPageLoader provides a variety of options and method calls.
{
BackgroundColor: '# 000', // background color
ProgressBarColor: '# f00', // progress bar color
ProgressBarHeight: 3, // progress bar height
ProgressBarFadeLevel: 1,
ShowPercentage: true,
PercentageColor: '# fff ',
PercentageFontSize: '30px ',
Context: 'body ',
AffectedElements: 'img, iframe, frame, script ',
OwnStyle: false, // if it is set to true, you can customize the progress bar style.
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, // executed when the animation ends after the page is loaded
CompleteLoad: false, // It is executed when the page has been loaded and does not require the animation to end.
Update: false
}

The callback function update is called when the page element is loaded. The returned data is:
Data. total: total number of loaded elements.
Data. loaded: loaded element.
Data. percentage: percentage.
Usage:

Copy codeThe Code is as follows:
$. OPageLoader ({
Update: function (data ){
// Here you can work
// With data. percentage
// Data. loaded
// Data. total
}
});

The above is the usage of the jQuery oLoader plug-in shared in this article. I hope you will like it.