Question

I have a for loop:

for(var i = 0; i < r.length; i++){
    var img=loadImage(r.id);
    $gallery.append(img);
}

and loading image function:

function loadImage(id){
    var $url='url/'+id;
    var img = new Image();
    $(img).load(function(){  
        return this;
    })     
    .attr({'src':$url,'id':id});
}

in the function above, I want to return the img so I can use it in the for loop, but this does not seem to work, I don’t get image to show up. I know I can use $gallery.append(this) inside load which works well, but I need to use the above method for other purposes. so any suggestion that I can do it in this way? thanks.

Answer 1

Using jquery’s load event to load images can be a bit buggy (taken from the jquery documentation) :

• It doesn’t work consistently nor reliably cross-browser
• It doesn’t fire correctly in WebKit if the image src is set to the same src as before
• It doesn’t correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser’s cache

In your case, I’d use one of two different approaches:

• callbacks
• events

With callbacks, you have the power to execute some functionality when an asynchronous task is done :

function loadImage(id,callback){
    var $url='url/'+id;
    var img = new Image();
    $(img).load(function(){  
        if(typeof callback == 'function')
            callback(this);
         return this;
     }).attr({'src':$url,'id':id});
}

for(var i = 0; i < r.length; i++){
    var img=loadImage(r.id,function(_img){
         $gallery.append(_img);
    });

}

With events, you have even more power…
You can create and trigger your own events and bind as many eventHandlers as you want.
An example of using personal events:

function loadImage(id){
    var $url='url/'+id;
    var img = new Image();
    $(img).load(function(){  
        $(document).trigger('my_special_event',[this]);
     }).attr({'src':$url,'id':id});
}

for(var i = 0; i < r.length; i++){
    var img=loadImage(r.id);
}

$(document).bind('my_special_event',function(e,img){
     $gallery.append(img);
});