47 responses to “jQuery Image Preload Plugin”

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

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

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

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

  5. Wisdomsky

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

  6. Jason

    Great plugin, exactly what I was looking for.

    @Wisdomsky there is a demo in the zip.

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

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

  9. frylock

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

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

  11. MrK

    Man, thanks for this. Has been really useful.

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

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

  14. Jordan

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

    Thanks again!

  15. nicothezulu

    THX.. This is working well.

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

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

  18. Nan

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

Leave a Reply