How to Create a Visual Image Preloader using jQuery

Apr26

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.

imagepreloader

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: , , , , ,

Comments

Wanna share your thoughts? Leave a message
71
  1. 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!

  2. Hakan
    May 6th, 2009
    at 2:41 pm

    Definitely a thing we will look in to!

    /H

  3. 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.

  4. 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.

  5. robert
    May 7th, 2009
    at 12:02 pm

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

  6. 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.

  7. Paresh
    May 9th, 2009
    at 3:35 pm

    Nice one! great, thanks

  8. Nice one!

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

  10. Nice tutorial, thanks.

  11. vik
    June 2nd, 2009
    at 11:03 pm

    Good work, thanks!

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

  13. 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);
      });

  14. vinnie
    June 12th, 2009
    at 8:08 pm

    pretty cool! thanks for share it!

  15. 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?

  16. 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.

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

  18. Great job! Thanks!

  19. 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.

    • Hi

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

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

  21. 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?

  22. 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!

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

  24. pre-load the div contains pics and texts

  25. subbu
    August 26th, 2009
    at 9:27 pm

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

  26. 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 !

    T

  27. 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

  28. 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

  29. Hi

    Nice effect. Thank you.

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

  30. 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…

    • 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.

  31. 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

    Thanks

  32. 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.

  33. 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

  34. 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 html tags.

  35. 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

  36. 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

  37. 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

    • Dino
      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. :)

  38. Maciek
    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. :)

  39. davide
    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

  40. Olivier
    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 !

  41. 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.

  42. Ross
    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

  43. Jason
    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!!

  44. 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.

  45. 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.

    • Dino
      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!

  46. baa
    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.

  47. adam
    August 25th, 2010
    at 7:49 pm

    thank you !!

  48. adam
    August 25th, 2010
    at 8:26 pm

    But can you tell me how can I except some images on my website from this effect ?

    • 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);
      });

      • adam
        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.

      • John
        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

  49. 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!

Find me on the Web

Other places you can find me

Daily Digest

Resource Sites for Inspiration

Extra Stuff

Represent!

Search this Website

Looking for something specific?