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.totalNumber of all elements that are about to load.
data.loadedNumber of loaded elements.
data.percentageCalculated 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 page

Creating 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