UPDATE: This script has been updated. Please go to the new post about the updated visual preloader script.
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.
Update
This script has been updated. Please go to the new post about the updated visual preloader script.
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
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!
May 7th, 2009
at 11:21 am
Thanks Matt!
May 6th, 2009
at 2:41 pm
Definitely a thing we will look in to!
/H
May 7th, 2009
at 11:22 am
That’s great. Thanks Hakan!
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!
May 7th, 2009
at 11:21 am
First of all, thank you. I’m really glad to know that this post has inpired you.
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.
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.
May 7th, 2009
at 12:02 pm
this is cool! I like this tutorial. you’re my Master!
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.
May 9th, 2009
at 3:35 pm
Nice one! great, thanks
May 11th, 2009
at 12:36 am
Nice one!
May 17th, 2009
at 8:55 am
This is a great look! Going to give it a shot myself.
May 31st, 2009
at 3:28 am
Nice tutorial, thanks.
June 2nd, 2009
at 11:03 pm
Good work, thanks!
June 9th, 2009
at 7:53 am
Awesome Awesome work!! I’ve been looking for something like this all week!
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…
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);
});
June 12th, 2009
at 8:08 pm
pretty cool! thanks for share it!
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?
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.
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
July 24th, 2009
at 1:40 am
Great job! Thanks!
August 4th, 2009
at 2:54 pm
Hi
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.
August 6th, 2009
at 7:31 pm
Hi
I haven’t tried that out yet but I think it’s very possible.
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.
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?
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.
September 9th, 2009
at 6:05 pm
I do too!
June 12th, 2010
at 6:20 pm
I can certainly understand how you feel.
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!
August 11th, 2009
at 1:14 pm
Oops! Sorry!
pre-load the contains pics and texts
August 11th, 2009
at 1:15 pm
pre-load the div contains pics and texts
August 26th, 2009
at 9:27 pm
There is any possible to hide particular images not a entiire document
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 !
T
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
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
November 30th, 2009
at 7:59 pm
Hi
Nice effect. Thank you.
Similar question to the above. Is it possible to only apply the effect to 1 image on the page.
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…
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.
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
Thanks
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.
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
March 2nd, 2010
at 6:20 pm
the trick is useless for images in css file. :(
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 html tags.
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
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
April 26th, 2010
at 10:56 am
Hi there. Nice script! I couldn’t see any licensing info, so could you let me know if I could include it in a commercial web template?
thanks
Anthony
May 3rd, 2010
at 1:47 am
sure. go ahead, you can use it anyway you like. I would be happy if you give me a mention or something but like I said, it’s up to you. :)
May 19th, 2010
at 5:37 pm
Hey man, great solution. I’ve just started my adventure with jQuery and wasn’t able to create a simple preloader by my own. All other solution I’ve found, as you’ve noticed, required source and it also didn;t suit me well. And than I’ve found your solution, which is great btw, and that is exactly what i was looking for. Of course I had to change this or that, but the idea itself is great. :) Cheers mate. :)
June 3rd, 2010
at 5:48 pm
I really like your script! what I need is simple but I can’t find it!, I would load the whole div instead then the images.
Div containing images and h1′s and h2′s
Please help!
Cheers
D
June 7th, 2010
at 7:31 am
Hi !
Good jobs for this script. But is it possible to rename the .image-holder class (for the CSS) ? I didn’t find the line where this class name was indicated in the script.
Thx !
June 24th, 2010
at 4:28 pm
Brilliant script. Just what I was looking for after searching Google for a while. Thankfully people like yourself take the time to develop something I can’t quite get my head around.
July 10th, 2010
at 10:47 pm
Hey
Great little script, just to let you know you might want to change
var int = setInterval(“doThis(i)”,500);
to
int = setInterval(“doThis(i)”,500);
Removing the var stops you from re-defining int twice therefore making clearInterval(int) actually do something ;). This is turn prevents a warning (jquery bug) showing up unlimited times in firefox’s error console :)
Thanks
July 22nd, 2010
at 11:05 pm
Putting together a site for an architectural practice (lots of images!). I’m not coder, but this method is clean and simple… and works beautifully. Thanks for posting!
Yeah, I know more than a year after it was posted!!
July 30th, 2010
at 4:52 am
Intresting attempt except its flawed. Do a console.log(i) inside your doThis(i) function and notice how even after loading all 4 images the loop continues and never stops the interval.
July 30th, 2010
at 6:09 am
Fixed and improved version available for the next few days at
http://www.sexytrends.pl/previews/preload-images/
No more infinite looping interval, image holders are now added by the script, and less code.
July 31st, 2010
at 9:37 am
Hey, thanks for fixing the code. I’m no hardcore javascript coder so this is such a great help.
I’ll update the post later with the fixed code!
Thank you very much!
August 2nd, 2010
at 11:00 pm
No problem, glad to help when I can. Any credit for helping update much appreciated ;)
August 13th, 2010
at 11:45 pm
thanks for the script.
it works perfectly for a DIV that has only one image inside.
but if there’s plenty of image inside the DIV, it does’nt seem to work.
{i am using the jquery.cycle plugin}
-
thanks.
August 25th, 2010
at 7:49 pm
thank you !!
August 25th, 2010
at 8:26 pm
But can you tell me how can I except some images on my website from this effect ?
August 25th, 2010
at 8:58 pm
Here is code that will only preload imgs with the class preload.
Example
Code
$(function() {
$(‘img.preload’).wrap(”).hide();
});
$(window).bind(‘load’, function() {
var i = 1;
var imgs = $(‘img.preload’).length;
var int = setInterval(function() {
if(i >= imgs) clearInterval(int);
$(‘img.preload:hidden’).eq(0).fadeIn(500);
i++;
}, 500);
});
August 26th, 2010
at 1:30 am
Thank you very much for this script, but I need script/function like ‘img.noload’, becouse i don’t need 3-4 images on my website.
September 5th, 2010
at 5:18 am
thanks sexytrends, that works perfectly for the one large image on each of my pages while letting tags and footer fly in fast – just what I wanted
many thanks to dino for the original concept, the effect is great – glad I found your blog
nice work
September 10th, 2010
at 9:23 am
have been looking for something like this for the last few days, and this script fits it to the letter! i don’t normally leave comments but this script is so spot on that i had to say something. love your work!