在 JavaScript 中从 img.load() 返回 img

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 循环中使用它，但这似乎不起作用，我没有显示图像。我知道我可以在 load 中使用 $gallery.append(this) ，效果很好，但我需要将上述方法用于其他目的。那么有什么建议我可以用这种方式做到这一点吗？谢谢。

Answer 1

使用 jquery 的 load 事件加载图像可能有点错误（取自 jquery文档) :

• 它不能一致地、可靠地跨浏览器工作
• 如果图像 src 设置为与之前相同的 src，它就无法在 WebKit 中正确触发
• 它不能正确地在 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

如果您想要 Element：

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