从页面上的图像元素检索信息 在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

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

按此顺序检查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;
}

据我所知，.complete属性是非标准的。这可能不是普遍的……我注意到它在Firefox和IE中的工作方式似乎有所不同。我在javascript中加载了一些图像，然后检查是否完整。在Firefox中，这似乎工作得很好。在IE中，它不会，因为图像看起来是加载在另一个线程上。只有当我对图像的赋值之间有延迟时，它才会起作用。src，检查image。complete属性。

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

在Safari和Chrome上，我看到image.complete true和naturalWidth设置，即使错误控制台显示该图像的404…我特意删除了那张图片来测试一下。但是上面的方法在Firefox和IE上都很有效。

使用imagesLoaded javascript库。

可用的纯Javascript和作为jQuery插件。

特点:

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库:浏览器和设备支持什么?

另一种方法是通过创建内存中的图像元素并将其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"))
;

基于我对img元素的W3C HTML规范的理解，你应该能够使用complete和naturalHeight属性的组合来做到这一点，就像这样:

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

complete属性的规范:

IDL属性complete如果出现下列情况之一，则必须返回true 条件为真: src属性省略。 获取资源后由网络任务源排队的最后一个任务已经排队。 img元素是完全可用的。 img元素被破坏了。 否则，该属性必须返回false。

本质上，complete返回true如果图像已经完成加载，或者加载失败。因为我们只想要图像成功加载的情况，我们需要检查nauturalHeight属性:

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

available的定义如下:

An img is always in one of the following states: Unavailable - The user agent hasn't obtained any image data. Partially available - The user agent has obtained some of the image data. Completely available - The user agent has obtained all of the image data and at least the image dimensions are available. Broken - The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained). When an img element is either in the partially available state or in the completely available state, it is said to be available.

因此，如果图像是“破碎的”(加载失败)，那么它将处于破碎状态，而不是可用状态，因此naturalHeight将为0。

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

您可以在img元素的W3C HTML规范或MDN上阅读更多相关内容。