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.