¿Bloqueo de Javascript hasta que se complete la precarga de la imagen?

Question

estoy usando javascript para cargar previamente varias imágenes con el siguiente código:

// do the following for each image where 'this' is the path 
(new Image()).src = this; 

Esto funciona bien - en el quemador, puedo ver cada imagen descarga se disparó después de cada iteración.

Mi problema es que quiero bloquear hasta que se complete la descarga real. En otras palabras, quiero mostrar un diálogo de "descarga de imágenes" al usuario hasta que todas las imágenes hayan terminado de descargarse.

En este momento si simplemente muestro el cuadro de diálogo antes de que se ejecute el bucle de precarga (y elimine el diálogo después de completar el bucle) simplemente captura las solicitudes de descarga NO se completa la descarga real.

Dado que parece que la descarga real es asincrónica, ¿hay alguna manera de bloquearla hasta que se hayan completado todas las descargas?

Answer 1

Usted puede utilizar el método onload que se dispara cuando la imagen se descarga correctamente, a continuación, establezca el siguiente paso en la función onload.

Aquí es la referencia de la escuela W3:

http://www.w3schools.com/jsref/event_img_onload.asp

Answer 2

Puede ocultar el div que tiene el contenido al que está precargando sus imágenes mientras muestra el div "cargando" hasta que se complete la precarga. Se vería algo como esto:

$('#content').hide(); 
$('#loading').show(); 

// for loop loading images here 

$('#loading').hide(); 
$('#content').show(); 

Answer 3

$(function() { 
    var imgs = $('img'); 
    var length = imgs.length; 
    var loaded = 0; 
    $('img').hide().each(function() { 
     $(this).bind('load', function() { 
      if ((++loaded) === length) { 
       imgs.show(); 
      }else { 
       //show images are still downloading 
      } 
     }); 
    }); 
});