Image preloaders and progress bar : Part 1

Are you looking for a preloader that shows a loading screen while your page is been loaded?. Here is a quick tutorial on creating one.


The Theory :
Lets look into the page components that should be taken into consideration while showing the load progress. First is the document itself that is been loaded which is pretty small and also cannot be analyzed as that itself will contain our preloader code. Next components are external stylesheets, scripts and other linked materials. Browser usually loads them before executing any javascript. So this either cannot be counted. The major components are images which are usually large in number and huge as well. In this tutorial we will use jquery for animating the progressbar. We will first make a simple preloader with a progressbar. Lets take a quick look on two functions in javascript/jquery: $(document).ready() and $(window).load() . The first function,as the name suggests, is called by the browser as soon as the script is completely loaded. This marks the start point of our preloader. The second function is called by the browser when all the components on the page are loaded. This marks the end point.

First lets create a simple preloader with progress bar :

The Logic :
We will divide the page contents into 2 parts(50% + 50%) : The text and The images. The point at which our script will start will give an indication that the html text has been loaded. At this point $(document).ready() will be triggered. Hence we can increment the progressbar to 50% of its area. Next the loading of images will occur, and once complete it will call $(window).load(). Now we can increment the progressbar to 100%, following it, a fade out effect.

The code :

This was a simple preloader... in the next post we shall consider counting the total images and then showing the real progress on the progressbar.