jQuery oLoader implementation of loading images and page effects

oLoader usage method

Whether oLoader or oPageLoader are based on jQuery, so please load before invoking jquery library, the author has to integrate the two plug-ins to 1: jquery. oLoader. min. js, already packed please stamp the source code download.
Calling jQuery oLoader is very simple, 1 sentence is as follows:

$('#element').oLoader(); 

Load image using oLoader:

$(function(){ 

  $('img').oLoader({ 

    waitLoad: true, 

    fadeLevel: 0.9, 

    backgroundColor: '#fff', 

    style:0, 

    image: 'loader.gif' 

  }); 

}); 

Load the page using oLoader:

$('#ajax').oLoader({ 

  url: 'test.html', 

  updateOnComplete: false 

}); 

Of course, it also provides a wealth of options and callback functions that can be set to your specific needs.

{ 

  image: 'images/loader.gif',  // Loading animated images  

  style: 1, //loader style  

  modal: true, // Modal mask, if is false , the mask layer is not displayed  

  fadeInTime: 300, // Mask fades in milliseconds  

  fadeOutTime: 300, // The mask layer talks about the speed in milliseconds  

  fadeLevel: 0.7, // Mask transparency, 0-1 

  backgroundColor: '#000', // The background color  

  imageBgColor: '#fff', //loader Animated picture background  

  imagePadding: '10', 

  showOnInit: true, // Initializes the display load animation  

  hideAfter: 0, //time in ms 

  url: false, //Ajax Call parameter, same below  

  type: 'GET', 

  data: false, 

  updateContent: true, // Whether to replace ajax Returns the content  

  updateOnComplete: true,// Whether to replace the content returned by the server immediately  

  showLoader: true, // Whether or not shown loader The picture  

  effect: '', // Dynamic effects, supported 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 not displayed until the element content is loaded  

  checkIntervalTime: 100, //interval which checks for position changes 

  // The callback function  

  complete: '', // When the animation is over, the content is loaded and called  

  onStart: '', // Called at the beginning of the animation  

  onError: '' // when ajax Called when the request goes wrong  

} 

oPageLoader Method of use 

oPageLoader Can achieve beautiful page loading progress bar animation, call oPageLoader Also very simple, as follows: 

$(function(){ 

  $.oPageLoader(); 

}); 

oPageLoader Provides a wealth of options and method invocations. 

{ 

  backgroundColor: '#000', // The 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 I set it to ture , 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, // When the page loads and the animation ends  

  completeLoad: false, // When the page is already loaded it does not need to finish the animation  

  update: false 

} 

The callback function update, which is called when the page element is loaded, returns data data as follows:
data.total: total number of elements loaded.
data.loaded: loaded element.
data.percentage: percentage.
Usage:

$.oPageLoader({ 

  update: function(data) { 

    //here you can work 

    //with data.percentage 

    //     data.loaded 

    //     data.total           

  } 

}); 

The above is the usage method of jQuery oLoader plug-in Shared by everyone in this article, I hope you will like it.