GOOCODE - Find your code/scripts

13 We use jQuery's ajax iframe in the page using the same load as the other content of the page, and today I have to share a plugin called jQuery oLoader, the plug-in also integrates oPageLoader, you can easily load the pictures and pages pretty effect.

oLoader Use
Whether or oPageLoader oLoader are based on jQuery, so please be loaded before calling jquery library.
Call jQuery oLoader very simple sentence as follows:

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

Use oLoader to Load picture:

$(function(){ 
  $('img').oLoader({ 
    waitLoad: true, 
    fadeLevel: 0.9, 
    backgroundColor: '#fff', 
    style:0, 
    image: 'loader.gif' 
  }); 
}); 

Use oLoader loading pages:

$('#ajax').oLoader({ 
  url: 'test.html', 
  updateOnComplete: false 
}); 

Of course, it also provides a wealth of options and callback function set according to specific needs.

{ 
  image: 'images/loader.gif',  //Load animated images 
  style: 1, //loader style 
  modal: true, //Modal mask, if false, it will not show the mask layer
  fadeInTime: 300, //Fade speed mask layer, ms
  fadeOutTime: 300, //Talk about the speed of the mask layer, ms
  fadeLevel: 0.7, //Mask layer transparency, 0-1
  backgroundColor: '#000', //Background color
  imageBgColor: '#fff', //loader Animated Picture background
  imagePadding: '10', 
  showOnInit: true, //Initialization show loading animation 
  hideAfter: 0, //time in ms 
  url: false, //Ajax call parameters, the same below 
  type: 'GET', 
  data: false, 
  updateContent: true, //Replace if ajax return content 
  updateOnComplete: true,//Whether to replace the contents of the server returns immediately 
  showLoader: true, //Whether to display loader Pictures 
  effect: '', //Dynamic effects, support for door,slide,doornslide 
  wholeWindow: false, //when true, oLoader covers the whole window 
  lockOverflow: false, //locks body's overflow while loading 
  waitLoad: false, //When the element content until they have finished loading display content 
  checkIntervalTime: 100, //interval which checks for position changes 
    
  //Callback 
  complete: '', //When the movie ended, finished loading the contents of call 
  onStart: '', //Called when the animation begins 
  onerror: '' //Ajax request error when calling 
} 

oPageLoader Use
oPageLoader can be achieved when the page is loaded pretty animated progress bar, call oPageLoader also very simple, as follows:

$(function(){ 
  $.oPageLoader(); 
}); 

oPageLoader provides a wealth of options and method calls.

{ 
  backgroundColor: '#000', //Background color 
  progressBarColor: '#f00', //A progress bar color 
  progressBarHeight: 3, //A progress bar height 
  progressBarFadeLevel: 1,  
  showPercentage: true, 
  percentageColor: '#fff', 
  percentageFontSize: '30px', 
  context: 'body', 
  affectedElements: 'img,iframe,frame,script', 
  ownStyle: false, //If set 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, //Executed when the page is finished loading animation ends 
  completeLoad: false, //When the page has been loaded on the end of the animation is not required to perform 
  update: false 
} 

Callback update, when the page is finished loading element called data returned data is:
The total number of elements loaded: data.total.
data.loaded: element has been loaded.
data.percentage: percentage.
How to use:

$ .oPageLoader ({
   update: function (data) {
     // here you can work
     // with data.percentage
     // Data.loaded
     // Data.total
   }
});

See page loading example 3 and page loading example 4 in details.