如何使用基于src属性的jQuery检查图像元素是否存在于DOM中？

Question

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

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

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

Answer 1

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

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

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

Answer 2

您可以通过检查图像的complete和readystate属性来检查图像是否被缓存。

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