How to Create a Visual Image Preloader using jQuery

Apr26

I have been searching the web for methods on how to visually preload the images on your site. I have found a few good ones but they require a defined source or path and that doesn’t work for me. I needed something to preload any image from any source or URL. So I gave up the search and created a simple solution for myself. Read on to find out how I did it.

imagepreloader

If you have been here in my site before, you may have noticed the images on this site have a visual preloading effect. It’s really a cool effect but it’s actually a fake preloader. It doesn’t preload the images individually but it considers all the images on the page before it starts showing each one. This method I’m about to share and explain works best on a page with not too many images. The script is purely based on jQuery with a little bit of CSS.

How it works

When the page is initialized, a script will hide all of the images. While all of the images on the page are loading, an animated preloader will take it’s place creating the “image loading” effect. After all the images on the page is loaded, a script will kick in and start fading in the images from the first instance to the last one. This method works with any image from any source or path. To achieve the whole preloader effect the image must be wrapped inside a div with a class. We need the extra markup for a placeholder for our animated preloader image.

Getting started

You need the jQuery library by John Resig. The older versions work but I suggest you always use the current release.

First, let’s create the HTML page. We need to include the jQuery library in the header of the page. And let’s wrap each image with a div.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Visual Image Preloader using jQuery</title>
	<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3563/3381408848_9c746f35f6.jpg?v=0" alt="Image 1"/>
	</div>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3657/3381403740_19457662b3.jpg?v=0" alt="Image 2"/>
	</div>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3454/3381399248_82bf005381.jpg?v=0" alt="Image 3"/>
	</div>
	<div class="image-holder">
		<img src="http://farm4.static.flickr.com/3586/3381393310_8f4b015827.jpg?v=0" alt="Image 4"/>
	</div>
</body>
</html>

Adding the script

Let’s create the fake preloader script and insert it on the header.

<script type="text/javascript">
	$(function () {
		$('img').hide();//hide all the images on the page
	});

	var i = 0;//initialize
	var int=0;//Internet Explorer Fix
	$(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
		var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
	});

	function doThis() {
		var images = $('img').length;//count the number of images on the page
		if (i >= images) {// Loop the images
			clearInterval(int);//When it reaches the last image the loop ends
		}
		$('img:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
		i++;//add 1 to the count
	}
</script>

Let’s test what we have so far. The images will only start to fade in once the entire document is loaded. That is how the event handler window.bind() works.

Adding the animated preloader

Now let’s add the animated preloader. You may generate your own loader image here. Let’s create a new CSS file in our favorite code editor.

.image-holder{
	float:left;
	width:500px;
	height:313px;
	padding:10px;
	margin:10px;
	border:1px solid #ddd;
	background:#eee url(loading.gif) 50% 50% no-repeat;
	display:inline;
}

Don’t forget to include the CSS file on your header.

<link rel="stylesheet" href="preloader.css" type="text/css" />

Summary and Conclusion

While I know that this is not a real solution for preloading images, it would still add a very cool effect to your website. This method will preload any image from any source or path. The only setback is you will not see the animated preloader on images not wrapped in a special div. But the good thing is it would still have that fade-in effect.

That’s it! I hope you enjoy the simple demo and tutorial. If you have any questions or suggestions, you may leave your comments below.

Tags: HowTo, Image Preloader, javascript, jQuery, Preloaders, Tutorials

Matt
May 6th, 2009
at 3:16 am

Great post, I also wanted to comment and say that I really like how you styled links on your site. nice work!

dino
May 7th, 2009
at 11:21 am

Thanks Matt!

Hakan
May 6th, 2009
at 2:41 pm

Definitely a thing we will look in to!

dino
May 7th, 2009
at 11:22 am

That’s great. Thanks Hakan!

Edward Williams
May 6th, 2009
at 2:57 pm

Great tutorial. Very inspiring that your solution was to create your own function rather that continue searching the net for someone else’s. You say it’s not a “real solution”, but I think it is. It looks tidy loading all images together and fading them in one by one. Great work!

dino
May 7th, 2009
at 11:21 am

First of all, thank you. I’m really glad to know that this post has inpired you.

Daniel
May 7th, 2009
at 9:39 am

Have you tried adding the loading icon as a background image to the inline image? That would remove the need to have a wrapper.

dino
May 7th, 2009
at 11:18 am

Yes, in fact that’s the first thing that I tried but it didn’t work because the initial script hides the whole image and all goes with it including it’s background image.

robert
May 7th, 2009
at 12:02 pm

this is cool! I like this tutorial. you’re my Master!

Thomas
May 7th, 2009
at 11:31 pm

Great post. It could be very handy in a later stage. But why that ugly demo-images ;-)

Greets, Thomas.

Paresh
May 9th, 2009
at 3:35 pm

Nice one! great, thanks

Jonathan Concepcion
May 11th, 2009
at 12:36 am

Nice one!

Shawn Ryder
May 17th, 2009
at 8:55 am

This is a great look! Going to give it a shot myself.

jldesign
May 31st, 2009
at 3:28 am

Nice tutorial, thanks.

vik
June 2nd, 2009
at 11:03 pm

Good work, thanks!

Jarette Howell
June 9th, 2009
at 7:53 am

Awesome Awesome work!! I’ve been looking for something like this all week!

Efren
June 9th, 2009
at 2:32 pm

Hey,

Shouldn’t the code:

function doThis() {
var images = $(‘img’).length;//count the number of images on the page

be:

function doThis(i) {
var images = $(‘img’).length;//count the number of images on the page

I think you are missing an ‘i’, inside the doThis() function…

dino
June 9th, 2009
at 6:30 pm

I’m not sure about that but the code works ok for me. Here’s where the i went.

$(window).bind(“load”, function() {
var int = setInterval(“doThis(i)”,500);
});

vinnie
June 12th, 2009
at 8:08 pm

pretty cool! thanks for share it!

Helle
June 19th, 2009
at 5:33 pm

Hey Dino,

this solution i searching for! Work’s very fine, thanks.
It’s possible to load images only for special parts of the site?

Tony
June 26th, 2009
at 11:43 am

Great tutorial…but I am having one problem with IE loading image twice. On almost every page I have a large body image pre-loading using your script. Because I didnt know how to apply the pre-loader to only one image on the page, I put the body image in an iFrame. If I view only the iFrame file, it doesn’t load twice…only when I view from main page. Any suggestions?

Thanks ahead of time.

tabela
June 28th, 2009
at 5:14 am

This article would like to thank the person who shared with us. Use in research. admins thank you.
good work

danimarin
July 24th, 2009
at 1:40 am

Great job! Thanks!

Rogga
August 4th, 2009
at 2:54 pm

Is it possible to use this script not only for images but for a whole webpage?

I have a bunch of accordions on a page and I wan’t to use a visual loader and load the page behind.

dino
August 6th, 2009
at 7:31 pm

Hi

I haven’t tried that out yet but I think it’s very possible.

Frank West
August 7th, 2009
at 5:42 pm

A nice concept, seems to work well and definetly improves the initial viewing impact of a web page.

Tony
August 9th, 2009
at 5:04 pm

I like this script but I cant get it to work on my wordpress page.

I have added the script and images are hidden, loader image visible etc, but the images never fade in.

Since im still testing this I havent altered your code in any way. Any ideas on what can cause this?

dino
August 10th, 2009
at 9:42 pm

Hi. Are you sure you had included the core jQuery library on the headers too? If you’re still experiencing some problems, let me peek at code or so I can help you better with it.

- Thorso
  September 9th, 2009
  at 6:05 pm
  
  I do too!

veradv
August 11th, 2009
at 12:53 pm

Thx for your nice code.

One question, can i hide the loading.gif after imgages loaded? How to do that?

Beacuse i want to preload the contains pics and texts, but the pics are not on the right position for overlapping the loading.gif!

veradv
August 11th, 2009
at 1:14 pm

Oops! Sorry!
pre-load the contains pics and texts

veradv
August 11th, 2009
at 1:15 pm

pre-load the div contains pics and texts

subbu
August 26th, 2009
at 9:27 pm

There is any possible to hide particular images not a entiire document

Tom
October 19th, 2009
at 3:48 am

Hi, is there any way to have this NOT happen to a certain image ?

I have a fixed header on a site and a click-through photo gallery, and everytime a click is made, the header reloads…

Cheers !

naransim
October 21st, 2009
at 1:54 am

hi, great tutorial!! great script!! but I’m having a little problem, I have 87 images on one page, but the funciotn only loads 34 images…nothing more….Plaese advise.

Thanks

Disappointed
November 16th, 2009
at 2:19 am

Nice tutorial … !!!

Question, … is it possible to only load (for example) the first 3 images of 10 images. Has it always to be the total of images on the page ?!

image01, image02, image03 as an array ???

Really need help on this one. Best wishes

Fred
November 30th, 2009
at 7:59 pm

Nice effect. Thank you.

Similar question to the above. Is it possible to only apply the effect to 1 image on the page.

Nicola
December 21st, 2009
at 7:54 pm

How can i don’t hide all images of the template?… this script —> $(‘img’).hide();//hide all the images on the page .
hide all image of the web but i want the preload only for 5 images called 1.png -2.png 3png etc…

Dino
December 23rd, 2009
at 8:48 am

Hi Nicola,

You must add a class to your image if you want to hide a specific set.

Here’s an example:
The HTML:
<img src="1.png" alt="1" class="preloadset"/> <img src="2.png" alt="2" class="preloadset"/> <img src="3.png" alt="3" class="preloadset"/>

jQuery:
$(img. preloadset').hide;

I hope that helped.

Rajesh Gurjar
December 30th, 2009
at 7:47 pm

This is good,

But how to i use in my web site this is for only image. I have give particular image into div but my forms are in html Please suggest me how to do it

Jay Tillery
January 13th, 2010
at 12:10 pm

Interesting tutorial. I’ll try this in a new project i’m working on that have some really heavy images to load. Thanks for the TUT.

Sys
January 25th, 2010
at 12:24 pm

Great stuff man. Terrific! Thanks!

bill.onthebeach
February 12th, 2010
at 11:17 am

this is about the simplest thing I’ve found under “jquery”. It solved 90% of my problem as fast as I could add your code. But my background image which is a large jpeg is still lagging. I am sure that the problem is in my code and not with your script. This is my first attempt with javascript. After seeing what I’, mssing, I guess I really got to go back to school now! Can you suggest a way to incorporate the background image into this script? thanks in advance. bill.onthebeach

reza
March 2nd, 2010
at 6:20 pm

the trick is useless for images in css file. :(

Dino
March 5th, 2010
at 1:56 pm

I’m sorry if you find it useless for your purpose but I didn’t create this script for images inside a css file. I made this for tags.

bill.onthebeach
March 5th, 2010
at 2:11 pm

I found a way after I left here that images are just as easy to handle as this.

two layers, jquery show and hide, but I did fade in and fade out to cover up the lag.

i have found that as long as its moving, nobody except guys like us notices the lag, except when it is dead still.

if that doesn’t suit you, add a sound clip. the sound is an even better distractor.

as everyone knows there is more than one way to skin a cat.

bill.onthebeach

David Cowgill
March 11th, 2010
at 2:58 am

Hi, great script. I needed to actually show preloaders for content boxes on a custom WordPress dashboard I was building.

I found it very easy to do by modifying a couple items in your script. Replace all the “img” with your div class (“.inside” in my case) that you wish to hide/show while it loads.

Now when my content boxes of twitter and rss feeds load, the image preloader appears.

One other thing worth mentioning: Everything works fine but I do get an error in my IDE for “int” usages. It says “illegal use of a future reserved keyword int”. Anyone else experience this?

Dino, are you using “int” to try and declare and integer or just chose a reserved name for a variable?

~David
ClassiPress

Dino Latoga