0

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

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 回调（即使图像被缓存）

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

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

4

2 回答 2

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 文档中所述

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

于 2013-08-19T06:23:14.363 回答
0

看看 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。

跨浏览器图像加载事件处理

于 2013-08-19T06:38:12.173 回答