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

return img from img.load() in JavaScript

本文关键字：img 返回 load 中的 JavaScript      更新时间：2023-09-26

我有一个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)内部加载，这工作得很好，但我需要将上述方法用于其他目的。有什么建议吗，我可以这样做?谢谢。

使用jquery的load事件来加载图像可能会有点bug(取自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);
    });
}

有了事件，你就有了更多的权力……
你可以创建和触发自己的事件，并绑定任意数量的eventandler。
使用个人事件的例子:

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

如果你想要的元素:

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});
}
相关文章：