Many times, in a project we need to load all the images together, or you can say we need to trigger some function when all the images of the page or a certain div are loaded. Though there are few solutions available for this problem but maximum of them are complicated, few are ineffective. But today I came up with a solution which is very easy to use and 100% effective. Just have a loot at the demo first.

live-demo-button download-button

Let me discuss the solution using the source code of this demo. You also can can download the source code from the above link. Anyways, so first of all if you open the index.html file, you will find it something like the following.

<h1>images are loading...</h1>
<img src="images/1.png" style="display:none">
<img src="images/2.png" style="display:none">
<img src="images/3.png" style="display:none">
<img src="images/4.png" style="display:none">
<img src="images/5.png" style="display:none">
<div id="aDiv">
	<img src="images/6.png" style="display:none">
	<img src="images/7.png" style="display:none">
	<img src="images/8.png" style="display:none">
		<img src="images/9.png" style="display:none">
		<img src="images/10.png" style="display:none">

This is just like a normal html file with lot of images. Few are directly inside the body and few are inside some divs. So what we will have to do is, firstly we have to count how many images are there and will store the number in a javascript or jquery variable, and after each image is loaded another variable will be incremented by 1. As soon as the value of the 2nd variable become equal to the first, it means all the images are loaded now. This is the main logic here.

So if you open the main.js file, you will find two variables there.

var total_images = $("body img").length;
var images_loaded = 0;

$(“body img”).length returns the number of images inside the body and we’re storing the value in a variable called ‘total_images’. If you want to check if the images in a certain div is loaded, then you just replace the ‘body’ with the corresponding div id. It will be something like $(“#aDiv img”).length. And initially the variable ‘images_loaded’ will be 0.

Now come to the final part where we will start loading each image and after the loading of each one we will increment the value of ‘images_loaded’ by 1 and will check whether it equals the value of ’total_images’. Here is the code for this.

$("body").find('img').each(function() {
		var fakeSrc = $(this).attr('src');
		$("<img/>").attr("src", fakeSrc).css('display', 'none').load(function() {
			if (images_loaded >= total_images) {
				// now all images are loaded.
				alert("all images are loaded. Click OK to view.")
				$("body img").show();
				$("body h1").hide();


Once both the variables are equal (for safety I used grater than equal to), we can call the required function or write the required code. It will be better if you hide all the images before and once all are loaded make them visible. Hope this technique will help you to develop your web page more efficiently :)