при наведении курсора мыши: проверить, существует ли внешний URL-адрес изображения, если да, показать изображение, если нет, показать noimg.png

Question

У меня есть область наведения мыши, где изображение выскакивает через jquery. Я хотел бы проверить, существует ли внешнее изображение. Если да, покажите это как обычно, если не просто покажите noimg.png.

Мой код:

 var image = new Image(); 
 image.src = urllink;
 var imagewidth = image.width;
 if (imagewidth == 0) {
   $('#cardpicture').attr('src', ".../noimg.png");
  } else
    {
       $('#cardpicture').attr('src', urllink);
    }

Кажется, работает только на втором наведении мыши. Таким образом, проверка выполнена правильно, но мне нужно дважды переместить мышь в области «наведения мыши», чтобы показать изображение, если оно существует. В первом событии "mouseover" он всегда показывает noimg.png. Что я делаю не так?

Я только что попробовал это с помощью метода .ajax и head, но понял, что это просто выдаст ошибку, потому что картинки являются внешними картинками (и не находятся на моем сервере).

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

С наилучшими пожеланиями и заранее спасибо!

Answer 1

, если кто-то заинтересован в решении ... Я наконец нашел его:

// test if image exists --------------:
loadImage(urllink);

function loadImage(src) {
    var image = new Image();
    image.onload = function() {
        if ('naturalHeight' in this) {
            if (this.naturalHeight + this.naturalWidth === 0) {
                this.onerror();
                return;
            }
        } else if (this.width + this.height == 0) {
            this.onerror();
            return;
        }
        // At this point, there's no error. Picture is available:
        $('#picture').attr('src', urllink);
        $('.image-content').css("display", "flex");
    };
    image.onerror = function() {
        //display noimg.png
        $('#picture').attr('src', ".../noimg.png");
        $('.image-content').css("display", "flex");
    };
    image.src = src;
}