¿Hay algo así como un evento listo cuando se carga y procesa una imagen en html?

Question

Estoy creando una aplicación de vista web para iPad, y quiero mostrar una pantalla emergente hasta que se carguen y se procesen el archivo de índice y un conjunto de imágenes.

Quiero que desaparezca esta pantalla secundaria cuando se cargan y procesan todas las imágenes, por lo que el usuario no ve la imagen típica de carga y representación de imágenes que no están en caché.

¿Hay algún evento en los navegadores para la realización de imágenes que pueda detectar, o hay algún complemento de Javascript que pueda hacer esto?

Answer 1

Hay dos detectores de eventos DOMContentLoaded y carga. El evento de carga se dispara cuando todos los archivos han terminado de cargarse desde todos los recursos, incluidos los anuncios y las imágenes. Las imágenes se muestran durante la descarga, por lo que esto debería ser lo que estás buscando.

Véase el demo here

Answer 2

Puedes añadir .load() a cada imagen y luego simplemente comprobar que todas las imágenes se cargan al declarar una variable.

Answer 3

voy a escribir para usted:

loadedImages = 0; 
timesChecked = 0; 
checkInterval = 500; 
maxLoadTime = 10000; // in miliseconds 
window.onload = function() { 
    for (var i = 0; i < document.getElementsByName('img').length; i++) { 
    document.getElementsByName('img')[i].onload = function() { 
     loadedImages++; 
    } 
    } 
    intervalID = setInterval("checkSplash()", checkInterval); 
} 

function checkSplash() { 
    timesChecked++; 
    if (loadedImages >= document.getElementsByName('img').length || timesChecked * checkInterval >= maxLoadTime) { 
    clearInterval(intervalID); 
    // hide splash screen 
    } 
} 

Enjoy :)

Es bastante simple en realidad: <img src=".." onload="alert('image 1 is loaded!')" />