在javascript中检测img加载

我有一个函数，其中我得到的img src值作为参数，我想要做的是检查该图像是否加载了200或404 /一些其他错误。如果它获得了200的好处，那么我想要将一个带有该src的img标签注入到DOM中（我的理由是，在检查过程中，它也会被加载到浏览器缓存中，并将该img标签注入DOM从缓存中加载它）。我试图用一个简单的代码片断如下：在javascript中检测img加载

function checkImage(src) 
{ 
    var img = new Image(), 
    tag = '<img src="'+src+'" />', 
    alt = '<span>sorry,image broken</span>'; 
    img.onload = function(){ 
     $('.some-container').html(tag); 
    }; 
    img.onerror = function(){ 
     $('.some-container').html(alt); 
    }; 
    img.src = src; 
}

它在铬工作得很好，但在Firefox和IE（两者都发射仅错误事件无论图像是否加载罚款或破去了Havok ）。而不是使用的onload和onerror的，我尝试过使用jQuery，如：

$(img).load(...).error(...).attr('src',url); 

$(img).on('load',...).on('error',...).attr('src',url); 

$('<img />').load(...).error(...).attr('src',url); 

$('<img />').on('load',...).on('error',...).attr('src',url);

，甚至试图通过desandro（https://github.com/desandro/imagesloaded）的jquery.imagesLoaded插件，如：

$(img).imagesLoaded().done(...).fail(...); 

$(img).imagesLoaded().progress(function(instance,image){ 
    image.isLoaded?alert('loaded'):alert('broken'); 
}); 

$('<img />').imagesLoaded().done(...).fail(...).attr('src',url); 

$('<img />').imagesLoaded().progress(function(instance,image){ 
    image.isLoaded?alert('loaded'):alert('broken'); 
});

我也尝试从解决方案：

jQuery callback on image load (even when the image is cached)

https://groups.google.com/forum/#!topic/jquery-dev/7uarey2lDh8

但事实证明，在Chrome中工作，但不是在FF或IE中，是否有任何解决方案可以检查存在于内存中但不在“DOM”中的映像？提前致谢。

来源

2013-08-19 somedev

经过严格检查，我发现了img的原因。onload并没有被解雇，结果我给了错误的url，除了这个函数之外，我从DOM中提取了background-urls，然后给了这个函数来检查它们是否应该被注入到DOM中，或者不，事实证明，FF icnludes一个额外的“”（双引号）在bg-url我没有删除，因此他们导致错误事件总是被触发。似乎最基本的img.onload，img.onerror按预期工作，感谢所有帮助你的人:) – somedev

您必须在设置源代码后检查图像是否已加载。

var img = new Image(); 
    //set source to the image 
    img.src = "set/image/source/path" 

    img.onload = function(){ 

    //if image load is successful 
    //create an jQuery object out of this image 
    var jQimage = $(this); 
    $('.myContainer').html(jQimage); 

    }

还要注意的是，如jQuery docs

所以提到jQuery的负载功能不能保证你的图像加载一个跨浏览器的检查，最好的方法是与本地JavaScript的onload检查并在必要时创建一个jQuery对象利用jQuery方法。

来源

2013-08-19 06:23:14 palerdot

为什么？ 'img'加载完成后'img.onload'被触发。如果图像将从缓存中加载，那么在onload函数被定义之前它可能已经准备就绪，那么事件根本不会触发。在'onload'处理程序之后设置'src'确保这不会发生。 – Teemu

如果图像已经加载，那么如果尝试加载相同的图像（即使用相同的源），则有时重用该图像对象，因为有时浏览器忽略onload。而且，就你的方法而言，如果你不向图像对象添加源代码，那么将不会调用onload，因为不需要加载任何东西。 – palerdot

请重新阅读我的评论... – Teemu

看看w3schools对Image（）javascript对象的评论。

http://www.w3schools.com/jsref/dom_obj_image.asp

onabort - 图像的加载被中断，W3C是

的onerror - 加载的图像时，会产生错误，W3C是

的onload - 的图像被完成加载，W3C YES

也是Image（）对象的完整属性，用于确定浏览器是否完成加载图像，但不幸的是，此特定属性不是W3c

希望能有所帮助

PS：经过一番Google搜索后，我发现堆栈溢出这个Q/A。

Cross-browser image onload event handling

来源

2013-08-19 06:38:12

那些是有帮助的是，我开始指出它，我认为onabort不是事件这在我的情况中被称为，因为我不会在正在下载的图像的中途更改src，只是FF和IE在浏览器缓存中似乎没有为图像对象调用onload事件。 – somedev

看看我编辑的答案我发现以前的Q/A从堆栈:) –

谢谢詹姆斯，但它也没有工作，最有可能因为.load（）不适用于已经存在的图像它说jQuery文档也一样 - http://api.jquery.com/load-event/ 它在提供的链接中提到了它的注意事项:) – somedev

在javascript中检测img加载

回答

相关问题