Blocco Javascript fino al completamento del precaricamento dell'immagine?

Question

Sto usando javascript per precaricare diverse immagini con il seguente codice:

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

Questo funziona bene - in Firebug vedo ogni immagine scaricare essere licenziato dopo ogni iterazione.

Il mio problema è che voglio bloccare fino al completamento del download effettivo . In altre parole, voglio mostrare all'utente la finestra di dialogo "Download immagine" fino al completamento del download di tutte le immagini.

In questo momento se mi mostra semplicemente la finestra di dialogo prima che il ciclo viene eseguito precarico (e rimuovere la finestra di dialogo dopo il ciclo è completato) rifletta semplicemente l'scaricare richiede NON il download vero e proprio completa.

Poiché sembra che il download effettivo sia asincrono, c'è un modo per bloccare fino al completamento di tutti i download?

Answer 1

È possibile utilizzare il metodo onload che viene licenziato quando l'immagine viene scaricato correttamente, quindi impostare il prossimo passo nella funzione onload.

Ecco di riferimento della scuola W3:

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

Answer 2

È possibile nascondere il div che contiene il contenuto per il quale si sta eseguendo il precaricamento delle immagini mentre si mostra il div "di caricamento" fino al completamento del pre-caricamento. Sarebbe simile a questa:

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