Not so long ago i created jQuery Image Resize Plugin, today i want to show you another plugin: jQuery Image Preloader. Basically it is a script that loads images in the background and track number of loaded images. It’s very simple, only 25 lines of code, but maybe useful if you are creating jQuery image gallery or some other script that requires image preloading.
Lets start of with how it works. As i understand it, it’s not actually a plugin but rather jQuery extension. It means that it’s not applied to HTML elements but rather used as function. Here’s how you can use it.
$(function() { $.preload([ "http://farm3.static.flickr.com/2661/3792282714_90584b41d5_b.jpg", "http://farm2.static.flickr.com/1266/1402810863_d41f360b2e_o.jpg" ], { init: function(loaded, total) { $("#indicator").html("Loaded: "+loaded+"/"+total); }, loaded: function(img, loaded, total) { $("#indicator").html("Loaded: "+loaded+"/"+total); $("#full-screen").append(img); }, loaded_all: function(loaded, total) { $("#indicator").html("Loaded: "+loaded+"/"+total+". Done!"); } }); });
$.preload() function takes two parameters. First is an array of urls that will be loaded. Second is an object that can have up to three callbacks:
- init() – executed before the first loading images start
- loaded() – executed when image is loaded (thus if there are 10 images then this callback is executed 10 times, for each image once)
- loaded_all() – executed when all images are loaded
You can see how it works here. That’s an extremly simple example but will allow you to easier grasp how to modify it to your needs.
16 Comments on "jQuery Preload images – tutorial and example"
Hi there. Would it be possible to embed this to a WordPress single page theme (single.php), using custom fields to get the image url?
It can’t be that difficult but I’m afraid I have no programming experience to do it myself.
It would really be very helpful as a wp plugin for those on a slow shared server.
Although I can not understand many of them,i know you do a very good job.
Argh, putting each filename directly in the Javascript? Too tedious and won’t work when you want to use the same script on many pages. Separation of content and presentation applies to JS as well as CSS.
Thanks dude!
Could I remove # init()# loaded() # loaded_all() from the code above?
Well yes, but that’s the only interface to check what has been loaded and what not.
How would you get the script to load the array in order, say if you had a slideshow to preload that needed to display in exact order. Thanks.
Hi, it doesn’t seem to work on IE7 when you refresh the page.
Would you know the reason why?
Thanks!
Founds the solution. I just had to call the load first before setting the attr.
imgList.push($(“”) .load(function() { loaded++; setting.loaded(this, loaded, total); if(loaded == total) { setting.loaded_all(loaded, total); } }).attr(“src”, imgArr[i]) );
Ditto on Glenn’s issue on IE7. His fix worked for me. Thank you Greg and thank you Glenn!
I also had to change this line:
for(var i in imgArr) {
to this:
for (i = 0; i < imgArr.length; i++) {
for it work on IE7.
How to handle error if the image is not loaded?
Hi,
I don’t get this to work, how I integrate it on my page?
Just trying this function and would like to preload the pictures and have a progress picture spinning
thanks
Thank you Greg for nice script!
Thank all for providing IE fixes.
Thanks for this tutorial, very useful for interactive websites! And thank you both Glenn and dario for your ie fix!
Thanks for this script mate. In combination with a sequential fadein function this look really great!
Would it be possible somehow to avoid having to write out every single file name? Current script is great if you’re just using it on one page, but if used on several it requires several copies targeting images on those individual pages.
Thanks again for the great script and tutorial