Image preloaders and progress bar : Part 2

In the previous post we had seen how we can create a simple progress bar, but it did not have any image preloader script and just depended on 2 events. In this post we will see how we can create a progress bar with simple image preloader, this means it will show the actual progress based on the total images loaded.


The Logic :
The basic requirement for this script is the knowledge of how many images exist. So for that purpose we have to count the number of images in the document. In this simple preloader, we will consider only the images in img tags. Jquery provides a powerful function for counting these or any other tags. We just have to say $('img').length() and we get the total count of the given element. Next we find the percentage each image contributes to the total.
Once we have the count we have to find the sources of these images so that they can be loaded one by one. While loading the image we also assign event trigger to the image so that it notifies us that it is loaded and we can proceed with incrementing the progressbar by the smallest percentage.
Once the percentage reaches 100% we can fade out the overlay screen.

The code :

So this was a simple preloader with progress bar which took all the html images into consideration. In our next post we will make our script a bit complex by taking the css images into consideration.

Have a nice day :)