Как проверить с помощью Jquery, существует ли элемент изображения в DOM на основе атрибута src?

Question

У меня есть несколько изображений для предварительного просмотра, которые можно увеличить. Если пользователь нажимает «увеличить», изображение кэшируется:

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

Что мне нужно знать, это как проверить, кэшировано ли изображение или нет, чтобы узнать, должен ли я показать загрузчик.

Answer 1

Вы можете использовать селектор атрибутов следующим образом.

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

Примечание. Это позволит найти элемент img в DOM, а не в кеше.

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