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.
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]) );