检测 javascript 中的 img 负载

Question

我有一个函数，我将 img src 值作为参数，我想做的是检查该图像加载时是否出现 200 ok 或 404/其他错误。如果它得到 200 ok，那么我想将带有该 src 的 img 标签注入到 DOM 中（我认为在检查期间，它也会被加载到浏览器缓存中，并将该 img 标签注入 DOM 会从缓存中加载它） .我尝试了一个简单的 sn-p 代码，如下所示：

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

它在 chrome 中运行良好，但在 firefox 和 ie 中运行良好（无论图像加载正常还是损坏，它们都只触发错误事件）。我没有使用 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”中不存在的图像？提前致谢。

Answer 1

您必须在为其设置来源后检查图像加载。

  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 加载功能不能保证您可以跨浏览器检查图像加载，如 jQuery docs 中所述

因此，最好的方法是使用原生 javascript 检查 onload，并在必要时创建一个 jQuery 对象以使用 jQuery 方法。

Answer 2

看看 w3schools 对 Image() javascript 对象的看法。

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

onabort - 图像加载中断，W3C YES

onerror - 加载图片时出错，W3C YES

onload - 图像已完成加载，W3C YES

也是 Image() 对象的完整属性，确定浏览器是否完成加载图像，不幸的是这个特定属性不是 W3c

希望对你有所帮助

PS：在谷歌搜索后，我从 Stack Overflow 中找到了这个 Q/A。

Cross-browser image onload event handling