Как обнаружить отказ загрузки изображения и если он не работает, повторите попытку до достижения успеха?

У меня есть загрузка изображений с сайта и не контролируется их доступность. Я обнаружил, что при большой нагрузке они иногда не загружаются, но при быстром обновлении они будут отображаться правильно.

Есть ли способ обнаружить, если изображения не загружаются, а затем, если это так, вызвать перезагрузку на img src, пока он не загрузится? Если да, не могли бы вы привести пример?

Ответ 1

Здесь кое-что скомпилировано, что могло бы помочь. Мне не удалось это проверить, пожалуйста, дайте мне знать, если у вас возникнут проблемы.

$(function() {
   var $images = $('img.imageClassUpdateAtInterval:not([src="/assets/spinner.gif"])');

  // Now, no such image with
   // a spinner
   if($images.length === 0 && window.imageLocator)
     clearInterval(window.imageLocator);


    window.imageLocator = setInterval(function() {
        $images.each(function() {
            $this = $(this);
            if (!$this.data('src')) {
                $this.data('src', $this.prop('src'));
            }

            $this.prop('src', $this.data('src') + '?timestamp=' + new Date().getTime());
            console.log($this.prop('src'));
        });
    }, 60 * 1000);

   // suppose, an error occured during
   // locating the src (source) of the
   // image - image not found, network
   // unable to locate the resource etc.
   // it will fall in each time on error
   // occurred 
   $('img.imageClassUpdateAtInterval').error(
          function () {   
                 // set a broken image
                 $(this).unbind("error").attr("src", "/assets/broken.gif"); 
                 // setting this up in relative
                 // position
                 $(this).css("position", "relative");
                 $(this).apppend("<span>Error occured</span>");
                 $(this).find("span").css({"position": "absolute", "background-color": "#252525", "padding": ".3em", "bottom": "0"});
   });

});

Вышеупомянутое решение составлено из двух разных решений, начатых @user113716 и @travis

Ответ 2

<img onerror="dosomthing()" ...>

Ответ 3

взгляните на этот код:

$('img.autoFix').error(function(){
    var src = this.src;
    this.src = src.substr(0, src.indexOf('?')) + '?t=' + new Date().getTime()
});

Ответ 4

Это очень простой подход, который обрабатывает все изображения на странице.

https://github.com/doomhz/jQuery-Image-Reloader

jQuery Image Reloader

Заставляет браузер повторить загрузку сломанных изображений. Порядочное решение для изображений, хранящихся в облаке (например, Amazon S3).

Почему и когда его использовать?

Этот плагин эффективен, когда вы загружаете изображения из облака (то есть Amazon S3), а CDN имеет задержку, пока изображение не будет доступно. В браузере отобразится значок с поврежденным изображением, и он не будет перезагружать его. jQuery Image Reloader позаботится об этом.

Код плагина

Единственный код, который необходимо активировать плагин, таков:

$(".slow-images").imageReloader();

Ответ 5

После объединения нескольких идей из других ответов, наряду с моими собственными, я придумал что-то, что сработало для меня:

Добавьте это к вашим элементам img:

onerror="tryAgain(this)"

А вот и скрипт:

<script>  
  function tryAgain(e) 
  {
    setTimeout(reloadImg, 1000, e);
  }

  function reloadImg(e)
  {
    var source = e.src;
    e.src = source;
  }
</script>

Конечно, вы можете изменить время ожидания на любое другое. Вы, возможно, даже можете сократить сценарий, но я хотел убедиться, что он читабелен (простите, что не использовал $ в моем ответе; я новичок в JS и вообще не использовал JQuery).