вернуть img из img.load () в JavaScript

Question

У меня есть цикл for:

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

и функция загрузки изображения:

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

в функции выше, я хочу вернуть img, чтобы я мог использовать его в цикле for, но, похоже, это не работает, у меня нет изображения для отображения. Я знаю, что могу использовать $ gallery.append (this) внутри загрузки, которая работает хорошо, но мне нужно использовать вышеупомянутый метод для других целей. Итак, есть ли какие-либо предположения, что я могу сделать это таким образом? спасибо.

Answer 1

Использование события jquery load для загрузки изображений может быть немного ошибочным (взято из документации jquery ):

• Он не работает согласованно и надежно кросс-браузер
• Он не срабатывает корректно в WebKit, если для src изображения установлено то же значение src, что и раньше
• Не правильно всплывает дерево DOM
• Может перестать срабатывать для изображений, которые уже находятся в кэше браузера.

В вашем случае я бы использовал один из двух разных подходов:

• обратные вызовы
• События

С помощью обратных вызовов у вас есть возможность выполнить некоторые функции, когда асинхронная задача выполнена:

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);
    });

}

С событиями вы получаете еще больше силы ...
Вы можете создавать и запускать свои собственные события и связывать столько событий, сколько хотите.
Пример использования личных событий:

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);
});

Answer 2

Если вы хотите Элемент:

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

Если вы хотите объект jQuery:

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