¿Cómo detectar la falla en la carga de la imagen y, si falla, intentar volver a cargarla hasta que tenga éxito?

Question

Tengo algunas imágenes cargando desde fuera del sitio y no tengo control sobre su disponibilidad. Descubrí que, bajo cargas pesadas, a veces no se cargaban, pero en una actualización rápida se mostraban al instante.

¿Hay alguna forma de detectar si las imágenes no se cargan y, de ser así, evocar una recarga en el img src hasta que se cargue? Si es así, ¿podrías dar un ejemplo?

Answer 1

Aquí algo que compilé que podría ayudar. No pude hacer pruebas de esto, por favor avíseme si tiene algún problema.

$(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"}); 
    }); 

}); 

La solución anterior se compila a partir de dos soluciones diferentes iniciado por @user113716 y @travis

Answer 2

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

Answer 3

echar un vistazo a este código:

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

Answer 4

Este

un enfoque muy simple que se ocupa de todas las imágenes en la página.

---

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

jQuery imagen Reloader

Fuerzas del navegador para volver a intentar cargar las imágenes rotas. Una solución decente para imágenes almacenadas en una nube (es decir, Amazon S3).

¿Por qué y cuándo usarlo?

Este complemento es efectivo cuando carga imágenes de una nube (es decir, Amazon S3) y la CDN tiene un retraso hasta que se puede acceder a la imagen. El navegador mostrará un ícono de imagen rota en su lugar y no volverá a intentar volver a cargarlo. jQuery Image Reloader se encargará de eso.

código Plugin

El único código que necesita para activar el plugin es la siguiente:.

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