Imagen alternativa y tiempo de espera: contenido externo. JavaScript

1 minuto de lectura

¿Cuál es la mejor manera de configurar una imagen alternativa local si la imagen externa no se carga o tarda demasiado en cargarse?

  • ¡Brillante! Estaba a punto de hacer la misma pregunta, e hice una búsqueda rápida en Google y encontré esta pregunta. Estaba pensando en hacerlo del lado del servidor, pero el lado del cliente suena mucho más sencillo.

    – Skilldrick

    14 de enero de 2010 a las 12:18

avatar de usuario
craig stuntz

Puedes agregar un onerror manipulador:

<img
  src="http://example.com/somejpg.jpg"
  onerror="this.onerror = null; this.src="./oops.gif""
/>

Nota: Configuración onerror a nulo en el controlador, para que la página web no se bloquee si oops.gif no se puede cargar por alguna razón.

  • Oh, me olvidé del error. Esto podría ser más fácil, pero la solución que publiqué a continuación permite almacenar previamente en caché las imágenes y verificar su disponibilidad antes de que tengan que mostrarse. Depende de lo que necesites…

    – moxn

    19 de octubre de 2009 a las 14:23

  • ¡Impresionante! Me encanta cuando aprendo nuevos trucos como este. Iba a recurrir a un poco de jQuery jiggery pokery.

    – Mike Murko

    25 de febrero de 2012 a las 18:51

  • ¡El problema aquí es el momento en que la imagen se considera no disponible! Puede llevar mucho tiempo que la actividad del navegador se cargue hasta que invoque el onerror evento.

    – SaidbakR

    31 de diciembre de 2015 a las 17:25

  • Muchas gracias. es muy fantastico

    – Albaz

    5 de noviembre de 2019 a las 10:06


Intenta hacer uso de la propiedad Image.complete.

var img = new Image(w,h)
img.src = "http://...";

Ahora compruebe periódicamente si img.complete es cierto y llamar a algún mecanismo de respaldo si aún fuera false después de n segundos.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad