Image loading - Jamie Johnson

If you have a fast connection, this article may not apply. It will be better seen on a slower connection. And to really see it in action more than once, you will have to clear your cache or do a hard refresh (CTRL+F5 if on Windows). This image loading I demonstrate shows the percentage of load before displaying the images. This can be useful if you have many images or large images, especially in cases where you are going to do something dynamic with the images where the behavior needs all images loaded so it can smoothly execute.

There is a "Loading" progress area showing the percentage of the images loaded. Once all are loaded, then the user is notified that the images are loaded and the images display.

The code

Loading: 0%

The code to do it? Here it is:

<style>#progress { text-align:center; } #progress img { display: none; width: 50%; margin-left: 25%; }</style>
<script>
// @JamesArthurJohn
var count = 0;
var pic = 0; 
var speed = 100; 
var quantity = 70; // quantity of pictures 
function preload(){
	count++;
	mypct = count/quantity;
	mypct = mypct*100;
	mypct = mypct.toString();
	mypct = mypct.split('.');
	mypct = mypct[0];
	mypct = mypct + " %";
	document.getElementById('pct').innerHTML = mypct; 
	if (count == quantity){
		document.getElementById('pct').style.display="none";
		document.getElementById('msg').innerHTML='Images loaded!'; 
		document.getElementById('override').innerHTML='';
	}
}
</script>
<div id="progress"><br /><br /><span id="msg">Loading: </span><span id="pct">0%</span><br /><br />
<img src="yourpicture.jpg" onload="preload()" />
<img src="anotherpicture.jpg" onload="preload()" />
<img src="andanotherpicture.jpg" onload="preload()" />
<img src="onemorepicture.jpg" onload="preload()" />
...
</div>
<div id="override"> </div>

Back to top