使用jQuery检查图像是否已加载（无错误）

javascript dom jquery jquery-events image

2022-08-30 00:32:29

我将JavaScript与jQuery库一起使用来操作无序列表中包含的图像缩略图。加载图像时，它会做一件事，当发生错误时，它会做其他事情。我使用jQuery和方法作为事件。在这些事件之后，我检查图像DOM元素中的.complete，以确保在jQuery可以注册事件之前图像尚未加载。load()error()

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

有人有更好的解决方案吗？

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

答案 1

按该顺序检查和属性。completenaturalWidth

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

答案 2

另一种选择是通过创建内存中图像元素并将其属性设置为原始图像的原始属性来触发和/或事件。以下是我的意思的一个例子：onloadonerrorsrcsrc

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

希望这有帮助！