检查是否使用 jQuery 加载了图像（没有错误）

Question

我正在使用带有 jQ​​uery 库的 JavaScript 来处理包含在无序列表中的图像缩略图。加载图像时，它会做一件事，当发生错误时，它会做另一件事。我使用 jQuery load() 和 error() 方法作为事件。 在这些事件之后，我检查 .complete 的图像 DOM 元素，以确保在 jQuery 注册事件之前图像尚未加载。

它可以正常工作，除非在 jQuery 注册事件之前发生错误。 我能想到的唯一解决方案是使用 img onerror 属性在全局某处存储“标志”（或者在它自己的节点上）说它失败了，所以jQuery可以在检查.complete时检查那个“存储/节点”。

谁有更好的解决方案？

编辑：粗体的要点并在下面添加了额外的细节： 在图像上添加加载和错误事件后，我正在检查图像是否完整（也称为加载）。这样，如果图像是在事件注册之前加载的，我仍然会知道。如果图像在事件之后没有加载，那么事件会在它加载时处理它。这样做的问题是，我可以轻松检查是否已经加载了图像，但 我无法判断是否发生了错误。

Answer 1

按顺序检查complete 和naturalWidth 属性。

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

Answer 2

另一个选项是通过在内存中创建图像元素并将其src 属性设置为原始图像的原始src 属性来触发onload 和/或onerror 事件。这是我的意思的一个例子：

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

希望这会有所帮助！

Answer 3

据我了解， .complete 属性是非标准的。它可能不是通用的......我注意到它在 Firefox 和 IE 中的工作方式似乎不同。我在 javascript 中加载了一些图像，然后检查是否完成。在 Firefox 中，这似乎工作得很好。在 IE 中，这不是因为图像似乎正在另一个线程上加载。仅当我在分配给 image.src 和检查 image.complete 属性之间延迟时，它才有效。

使用 image.onload 和 image.onerror 对我也不起作用，因为我需要传递一个参数来知道调用该函数时我正在谈论的图像。任何这样做的方式似乎都失败了，因为它实际上似乎传递了相同的函数，而不是同一函数的不同实例。因此，我传递给它以识别图像的值总是最终成为循环中的最后一个值。我想不出任何办法来解决这个问题。

在 Safari 和 Chrome 上，即使错误控制台显示该图像的 404，我也看到 image.complete 为 true 和 naturalWidth 设置...我故意删除了该图像以进行测试。但上述方法适用于 Firefox 和 IE。

Answer 4

这就是我使用上述方法的组合使其跨浏览器工作的方式（我还需要将图像动态插入到 dom 中）：

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

注意：您需要为 isIE 变量提供一个有效的布尔状态。

Answer 5

我尝试了很多不同的方法，这是唯一适合我的方法

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

您还可以添加一个回调函数，在所有图像都加载到 DOM 并准备就绪后触发。这也适用于动态添加的图像。 http://jsfiddle.net/kalmarsh80/nrAPk/

Answer 6

实时网络检测器 - 无需刷新页面即可检查网络状态： （它不是 jquery，而是经过测试，并且 100% 有效：（在 Firefox v25.0 上测试））

代码：

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

如果连接丢失，只需按“再次”按钮。

更新 1： 不刷新页面自动检测：

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>

Answer 7

使用imagesLoaded javascript library。

可用于纯 Javascript 和 jQuery 插件。

特点：

• officially supported by IE8+
• 许可证：麻省理工学院
• 依赖项：无
• 重量（缩小和压缩）：7kb 缩小（轻！）

资源

• github上的项目：https://github.com/desandro/imagesloaded
• 官网：http://imagesloaded.desandro.com/
• https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• imagesloaded javascript library: what is the browser & device support?

Answer 8

阅读此页面上有趣的解决方案后，我创建了一个易于使用的解决方案，该解决方案深受 SLaks 和 Noyo 的帖子的影响，该解决方案似乎适用于 Chrome、IE、Firefox、 Safari 和 Opera（都在 Windows 上）。此外，它还可以在我使用的 iPhone/iPad 模拟器上运行。

此解决方案与 SLaks 和 Noyo 的帖子之间的一个主要区别是此解决方案主要检查 naturalWidth 和 naturalHeight 属性。我发现在当前的浏览器版本中，这两个属性似乎提供了最有用和最一致的结果。

当图像完全加载并成功时，此代码返回 TRUE。当图像尚未完全加载或加载失败时，它返回 FALSE。

您需要注意的一件事是，如果图像是 0x0 像素图像，此函数也将返回 FALSE。但是这些图像非常少见，我想不出一个非常有用的情况来检查是否已加载 0x0 像素图像:)

首先我们将一个名为“isLoaded”的新函数附加到 HTMLImageElement 原型中，以便可以在任何图像元素上使用该函数。

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

那么，每当我们需要检查图片的加载状态时，我们只需调用“isLoaded”函数即可。

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

根据 giorgian 对 SLaks 和 Noyo 帖子的评论，如果您打算更改 SRC 属性，此解决方案可能只能用作 Safari Mobile 的一次性检查。但是您可以通过创建具有新 SRC 属性的图像元素来解决此问题，而不是更改现有图像元素的 SRC 属性。

Answer 9

使用此JavaScript 代码，您可以检查图像是否成功加载。

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

试试这个

Answer 10

根据我对the W3C HTML Specification for the img element 的理解，您应该能够使用complete 和naturalHeight 属性的组合来执行此操作，如下所示：

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

来自complete 属性的规范：

如果满足以下任一条件，则 IDL 属性完成必须返回 true 条件为真：

• src 属性被省略。
• 获取资源后网络任务源排队的最终任务已排队。
• img 元素完全可用。
• img 元素已损坏。

否则，该属性必须返回 false。

所以本质上，complete 如果图像已完成加载或加载失败，则返回 true。由于我们只需要成功加载图像的情况，我们还需要检查 nauturalHeight 属性：

IDL 属性 naturalWidth 和 naturalHeight 必须返回 图像的固有宽度和高度，以 CSS 像素为单位，如果图像 可用，否则为 0。

而available 的定义如下：

img 总是处于以下状态之一：

• 不可用 - 用户代理尚未获得任何图像数据。
• 部分可用 - 用户代理已获取部分图像数据。
• 完全可用 - 用户代理已获取所有图像数据，并且至少图像尺寸可用。
• Broken - 用户代理已经获得了它所能获得的所有图像数据，但它甚至无法将图像解码到足以获得图像的程度 尺寸（例如，图像已损坏，或格式不正确 支持，否则无法获取数据）。

当一个 img 元素处于部分可用状态或 完全可用的状态，称为可用。

所以如果图像“损坏”（加载失败），那么它将处于损坏状态，而不是可用状态，因此naturalHeight 将为 0。

因此，检查imgElement.complete && imgElement.naturalHeight !== 0 应该告诉我们图像是否已成功加载。

您可以在the W3C HTML Specification for the img element 或on MDN 中了解更多信息。

Answer 11

从页面上的图像元素中检索信息
在 Chrome 和 Firefox 上测试工作
工作jsFiddle（打开控制台查看结果）

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

注意：我使用jQuery，我认为这可以在完整的javascript上实现

我在这里找到了很好的信息OpenClassRoom --> 这是一个法语论坛

Answer 12

我在完整加载图像和 EventListener 时遇到了很多问题。

无论我怎么尝试，结果都不可靠。

但后来我找到了解决方案。从技术上讲，这不是一个好的，但现在我从来没有遇到过图像加载失败的情况。

我做了什么：

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

我不是一次加载图像，而是在第一次之后直接加载第二次，并且都通过事件处理程序运行。

我所有的头痛都消失了！

---

顺便说一句： 来自stackoverflow的你们已经帮助了我超过一百次。非常感谢！

Answer 13

这段代码帮助我修复了浏览器缓存问题：

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

当浏览器缓存被禁用时，只有这段代码不起作用：

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

要使其正常工作，您必须添加：

.each(function() {
     if($(this).prop('complete')) $(this).load();
});

Answer 14

var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

// 或作为插件

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded() 

Answer 15

这个对我来说很好用:)

$('.progress-image').each(function(){
    var img = new Image();
    img.onload = function() {
        let imgSrc = $(this).attr('src');
        $('.progress-image').each(function(){
            if($(this).attr('src') == imgSrc){
                console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
            }
        })
    }
    img.src = $(this).attr('src');
});