48 responses to “jQuery Image Preload Plugin”

  1. Reza

    thank u. this is very useful for me.
    but i think the ‘each’ part does not work correctly.
    i want to use it to make progress bar but i can t.
    can u help me?

  2. Taylor

    Wow, thank you so much! I have been looking for this plugin or the code to create it for hours.

  3. Michael DiSanto

    This plugin is exactly what I was searching for however I was unable to get the “all” callback function to fire in IE7. “each” works fine, but “all” was not called.

    Code was basically
    $(‘#content img’).imgpreload({
    each: function(){
    alert(‘!’);
    }.
    all: function(){
    alert(‘!’);
    }
    });

    Any ideas?

  4. Steven

    thanks a lot. Exactly what I was looking for

  5. George

    I’m trying to use this inside WordPress and I’m getting an error when I use it:

    $(“#randimg img”).imgpreload is not a function

    It works if I have my script and this plug-in in the body but doesn’t work if I load either or both my script and the plugin in . What am I doing wrong? Thanks.

  6. keun

    Very nice.

  7. YAACH

    Thanks..very useful..I still have a question.
    What if you want to load 20 images and you dont want to specify the path one by one. Is there a way you can load images with different paths BEFORE the DOM is built?

  8. guy

    I cant believe this is not a part of jquery. why not have in built in? (a la mootools Asset class). its was a real pain to find this plugin…

  9. philipp

    nice plugin. exactly what im looking for. thanks!

  10. Matthew Rath

    Brilliant! :p ive been looking for a decent image preloader for a while now to implement on my site as im currently building a new portfolio. This fits the bill exactly, the only thing i would take into consideration is YAACH’s comment, it would be nice to also have loop function within the class so u can just specify a directory an let it take care of the rest but ill attempt to add this in myself thanx again this is awesome :p

  11. Alexander Zaharakis

    Excellent work brother! Works a treat

  12. Edward Hotchkiss

    Hey, you can check out a great jQuery Preloader that I wrote with full callbacks, auto reading of images to preload, and a lot of easing in animations. Check it out here: jQuery Preloader

  13. Sojaner

    Hi Dimas,

    Thank you so much for this nice plugin.

    I have written a similar code and I was using my own code, but it has some problem with ie, so I decided to use yours.

    BUT, I have tested your plugin with Ietester in ie6 tab ie7 tab and ie8 and also, Safari, Chrome, Opera and Firefox also Windows’s native ie8…

    It works great in all of the browsers except ie6 and ie7!

    So I replaced your event listener code, with jQuery bind method this way:

    var img = new Image();
    $(img).bind("load", null, function() { ...
    

    And now it works great in all browsers I mentioned!

    That would be great if you update you code. 🙂

    Thank you so much again, 🙂

  14. Valerio

    Hello,
    I was looking for a plugin to preload images, and after trying a lot of things i found yours to be the best one.

    It would be nice to be able to call a function if the image does not exist or if it doesn’t load after a certain amount of time (sadly, i haven’t found anything that does that)

  15. Greg

    hello, do you think it is possible to have the image preloader plugin have ‘spinner.gif’ at each image location? so that the end user client browser knows that the image is forthcoming?
    it would be a nice feature to let the user know that it’s a larger image, and it is loading/that there is nothing wrong.
    thanks you for sharing your script! 🙂

  16. Rodrigo Tejero

    Hi man, thanks for this extraordinary plugin.
    Im having a problem, i’m preloading 355 images for a report, but the preloader always stop in imagen 140-240, y can get every image preloaded.

    My images are un an array y get from my database.
    Do you have any idea why this is happening?

    Thanks

  17. Rodrigo Tejero

    @Dimas, Thanks for the fast response man. In firefox, the script shut down the browser, in IE, the script stops. My images are in average, 250k.

  18. Andrew Martin

    Dude, YES! Thank you so much for finally posting an image preloader that works. You have no idea how many HACK plugins there are out there.

    THANKS!

  19. Donny

    Is there a working demo of this plugin in action?

  20. Julian

    Hi Dimas,

    This is a great plugin but it could do with a “destroy” method to tear down the each and all callbacks. Any chance you could implement this?

    Thanks
    Julian

  21. Julian

    Thanks Dimas, that’s ace. Also, the comment (and fix) from Sojaner regarding replacing:

    img.onload = function() { loaded.push(this); …

    With

    $(img).bind(“load”, null, function() { loaded.push(this); …

    This does seem to fix the problem in old versions of IE.

    If you could implement the cleanup/destroy method soon i’d be a very happy chap indeed as i’m building a brochure in js using your plugin.

    All the best
    Julian

  22. Andrew Martin

    Love this plugin..until I realized it fails on SOME systems with IE7. Any way you think you could fix that? The callback for “all” images downloaded fails. It worked for me on my test system, then the client said it didn’t work on theirs (IE7, IE8) unfortunately, so it’s a toughie to fix I’m sure.

    Either way, great work. Thanks.

  23. ettolo

    Hi, thanks for your code!
    I’m preloading 275 imgs (10mb at least) and use the below code.
    It seems that it is loading several images before firing the write_debugger(); function.
    The first images ar loaded by filename, the bigger part by dom reference
    Is this ok or i’m missing someting?

    $(document).ready(function(){

    // images preload
    $.imgpreload(‘config_files/images/loadingAnimation.gif’,function(){
    write_debugger(“Loading gif”, “”);
    $.imgpreload(‘config_files/images/modello_’+modello+’/base.png’,function(){
    write_debugger(“Base loaded”, “”);
    $.imgpreload(‘config_files/images/modello_’+modello+’/base_v2.png’,function(){
    write_debugger(“Base V2 loaded”, “”);

    $(‘.immagine_parte img’).imgpreload
    ({
    each: function()
    {
    write_debugger($(this).attr(“name”), “”)
    },
    all: function()
    {
    write_debugger(“Fine!”, “”);

    }
    });
    });
    });
    });
    });

    Thanks!
    Nicola

  24. Wisdomsky

    any demo plsss? we need a nice demo in order us to understand much easier how this works…..

  25. Jason

    Great plugin, exactly what I was looking for.

    @Wisdomsky there is a demo in the zip.

  26. Bob

    I’ll be checking the source briefly, but in the meantime, I’m wondering if there’s any mechanism to prevent images from being preloaded multiple times. Or is that something I need to worry about, and imgpreload doesn’t care?

  27. Pushpinder Bagga

    Hey Dimas, I just added an issue at Github. Could you please see if we can fix it? It might be a pull request but it didn’t allow me to so an issue logged.

  28. frylock

    Hey, thanks for this plugin. Its perfect! Just what I needed a callback based approach.

  29. Chetan

    simple, great and lightweight. keeps its footprint down and provides excellent work.

    I had my own image loader plugin(vanila js), but today I found that it was not working with IE7/8 in certain case.

    googled for some ossome plugin and this works like charm.

    Thank you.

  30. MrK

    Man, thanks for this. Has been really useful.

  31. ricardomasao

    Hi all,

    I’m trying to load images from a bidimensional array. Is this possible to catch the DOM object at the end of the load? Above my code:

    var filesToLoad = []
    filesToLoad.push({src:$(element).attr(‘background’), id:’background’})

    $.imgpreload(filesToLoad,
    {
    each: function()
    {
    console.log($(this)) // big and strange object;

    }
    })

    Thank you

  32. Jordan

    Great job!

    One thing I’m having problem is, when i try to replace your outcome with Images, it appears to say ‘error’ when the image actually loaded. I am trying to remove those messages and replace them with images, it just gets confusing.

    Can you link us another demo, but with ACUTAL images? This will save our time and struggle.

    Thank you!

  33. Jordan

    Also, why does the page ‘redirect’ me to a blank page with successful loaded images (still being in the same URL)?

    Thanks again!

  34. nicothezulu

    THX.. This is working well.

  35. druellan

    Great plugin, a must-have in my collection.
    If you’re having random 404 errors popping up on the console, about an image file named “undefined”, thats due to an tag that has “src” missing.
    To avoid the error, add a new line right below ‘url = $(elem).attr(‘src’);’ like this: if ( ‘undefined’ == typeof url ) url = “”;
    That will prevent imgpreload to try load an incorrect filename.

  36. Danny

    It seems the array of loaded images has a different order than the one of filenames you issue to the plugin (I guess the order is based on loaded status). It would be nice to have this to be the same order or have some method to fetch an image from the array of loaded images by an id or filename. Currently i’m doing something this:

    var _imageCache;

    $.imgpreload([‘images/test1.jpg’, ‘images/test2.jpg’], function() {
    _imageCache = this;
    _onImagesLoaded();
    });

    var _getImage = function(src) {

    for(var i = 0, len = _imageCache.length; i<len; i++){
    if(_getImageFilename(_imageCache[i].src) == _getImageFilename(src)) return _imageCache[i];
    }
    }

    var _getImageFilename = function(src) {

    return src.substring(src.lastIndexOf('/') + 1);
    }

    var _onImagesLoaded = function() {
    var image = _getImage('images/test.jpg');
    }

    This only works in my case, where there are no duplicate filenames. It's a workaround for the fact src returns a full path instead of the given url in the array.

  37. Nate

    Is there a way to pull the percentage progress from this method? Works great for small files, but I’m concerned about larger files and people not realizing what’s happening.

  38. Nan

    I cannot download the image preload plugin..where do I go?