Ocultar imágenes que no se cargaron

Question

Tengo una aplicación de Android que genera algo de HTML que se representa localmente, en una vista de Webkit.

Los detalles de la generación de HTML no son realmente tan importante excepción de:

• la mayor parte se trata de un lugar, y no puedo cambiarlo
• la plantilla en torno a que HTML (incluyendo las cabeceras , pies de página, HEAD, etc.), CSS y Javascript están bajo mi control.
• la mayoría de las imágenes están bajo mi control, y se representan por separado del HTML intocable. Estas imágenes provienen del disco local y no requieren la red. Se puede suponer que estas imágenes están siempre disponibles.
• el HTML intocable contiene imágenes que, idealmente, se mostrarían. Si la red no está disponible, estas imágenes no se cargarán.
• es probable que el archivo HTML completo se almacene en el disco, mucho antes de que se represente. es decir, no podemos representar HTML diferente en función de la disponibilidad de la red.

Es probable que la aplicación esté fuera de línea por lo menos algunas veces, por lo que deseo manejar el caso donde las imágenes no se pueden cargar.

Las imágenes en cuestión son predominantemente imágenes de seguimiento 1x1, pero pueden incluir imágenes que deberían estar visibles si están disponibles.

Sin invocar JQuery, o una biblioteca externa, ¿qué recomendaría a mi plan de ataque?

que tienen ideas sobre cómo hacer esto, pero se dan cuenta de que son muchas trampas de las que preocuparse:

• con un selector CSS, seleccione todas las imágenes que no se han cargado (¿hay un selector de tales ?) y usa display:none;.
• con Javascript, establezca el atributo alt en cada imagen en la cadena vacía. Esto tendría que hacerse en document.onLoad?
• compruebe la disponibilidad de la red y, a continuación, utilice CSS para ocultar todas las imágenes con @ href ~ =^http. No estoy seguro de cómo/cuándo aplicar este estilo.

Si me ayuda, para este problema, parece que tengo los siguientes sub-problemas. No está clara la estrategia óptima para ninguno de ellos:

• cómo determinar la carga de las imágenes o el estado de la red.
• cómo ocultar/enmascarar el error al cargar imágenes, de modo que el usuario no puede detectar que falta la imagen.
• cuándo realizar estas tareas (por ejemplo, cuando el documento/ventana se ha terminado de cargar?)
• cómo aplicarlos.

Cualquier pensamiento, código, sugerencia sería recibido con gratitud.

Answer 1

• cómo determinar la carga-dad de las imágenes o el estado de la red.
• cómo ocultar/enmascarar el fracaso para cargar imágenes, de manera que no es detectable por el usuario que la imagen no se encuentra

Usted puede mirar en el evento onerror que se activa cuando una imagen falla a la carga:

<img src="image.png" alt="image" onerror="this.parentNode.removeChild(this)" /> 

• cuándo realizar estas tareas (por ejemplo, la carga cuando el documento/ventana ha terminado?)
• cómo aplicarlos.

Esto funcionó para mí en Firefox y Chrome cuando he añadido el anuncio el final de mi documento (antes </body>):

var imgs = document.getElementsByTagName('img') 
    for(var i=0,j=imgs.length;i<j;i++){ 
     imgs[i].onerror = function(e){ 
     this.parentNode.removeChild(this); 
    } 
} 

Es bastante posiible que si una imagen al comienzo de su documento no se cargó, y usted adjunta los manejadores de eventos cuando el documento está listo, algunos navegadores no pueden disparar ese controlador, debe probarlo en su plataforma de destino.

Answer 2

cómo determinar la carga-dad de las imágenes o el estado de la red .

Un enfoque puede ser mantener referencias de todas las imágenes en el DOM y vincular un evento onload que se activa cuando la imagen ha terminado de cargarse. Después de un período de tiempo específico, se puede suponer que cualquier imagen que no se haya disparado sea problemática.

cómo ocultar/enmascarar el no se pudo cargar imágenes, de manera que no es detectable por el usuario que la imagen no se encuentra.

Ya ha mencionado algunas opciones. ¿Has pensado en eliminar el elemento del DOM por completo? El cliente ya no intentará cargar la imagen.

cuándo realizar estas tareas (por ejemplo, cuando el documento/ventana ha terminado carga?)

No puede utilizar los document o windowonload eventos debido a que no va a disparar hasta que todo en el DOM ha cargado. Verificar la disponibilidad del DOM varía entre los navegadores (¡afortunadamente solo se trata de uno!). This might get you started.

Answer 3

Interesante pregunta.

Al buscar en Firefox, si una imagen no se carga, su naturalHeight (y el ancho también) es 0. Probablemente podría utilizar algunos javascript en Android para leer una propiedad similar. Mi script de prueba en Firebug era simplemente:

document.getElementsByTagName('img')[0].naturalHeight 

Answer 4

Si las imágenes no se contentan con ser consumido en lugar de texto o para complementar el texto, entonces deberían ser CSS imágenes de fondo. Las imágenes de fondo son completamente pasivas y no se muestran en absoluto si no se pueden recuperar o procesar.