如何根据 src 属性检查 DOM 中是否存在图像元素？答案

【问题标题】：How to check with Jquery if image element exists in DOM based on src attribute?如何根据 src 属性检查 DOM 中是否存在图像元素？
【发布时间】：2012-03-15 09:03:36
【问题描述】：

我有一些可以缩放的预览图像。如果用户点击“缩放”，图像被缓存：

var zoomImg = new Image();
      zoomImg.onload = function() {
      image.attr('src', zoomlist[currentFrame]);
   });

我需要知道的是如何检查图像是否被缓存，以知道我是否应该显示加载器。

【问题讨论】：

标签： jquery caching dom attributes

【解决方案1】：

你可以像这样使用属性选择器。

if($('img[src="imageSource"]').length){
     //Image is present
}

注意：这将在 DOM 中找到 img 元素，而不是缓存。

【讨论】：

好的，它应该可以工作，因为图像是在缓存后添加到 DOM 中的，但我之前尝试过这种方式来询问这里，但它没有工作。现在会再试一次。

【解决方案2】：

您可以通过检查图像的完整和就绪状态属性来检查图像是否被缓存。

var zoomImg = new Image();
zoomImg.src = zoomlist[currentFrame];
if (zoomImg.complete || zoomImg.readystate === 4) {
    image.attr('src', zoomlist[currentFrame])
}
else {
    showLoader();
    zoomImg.onload = function() {
        hideLoader();
        image.attr('src', zoomlist[currentFrame]);
    });
}

【讨论】：