mostra tutte le immagini solo dopo il loro carico completo

Question

In

<div id="all-images"> 
    <img src="images/1.jpg"> 
    <img src="images/2.jpg"> 
    <img src="images/3.jpg"> 
    <img src="images/4.jpg"> 
    <img src="images/5.jpg"> 
    <img src="images/6.jpg"> 
</div> 

voglio mostrare tutte le immagini di id = "all-immagini" solo quando tutte le immagini all'interno di questo id caricheranno completamente (Jquery).

E prima di caricare tutte le immagini di questa sezione mostra "Loading .." text

Answer 1

Assumendo che il div è pre-nascosto:

$("#loadingDiv").show(); 
var nImages = $("#all-images").length; 
var loadCounter = 0; 
//binds onload event listner to images 
$("#all-images img").on("load", function() { 
    loadCounter++; 
    if(nImages == loadCounter) { 
     $(this).parent().show(); 
     $("#loadingDiv").hide(); 
    } 
}).each(function() { 

    // attempt to defeat cases where load event does not fire 
    // on cached images 
    if(this.complete) $(this).trigger("load"); 
}); 

Answer 2

http://api.jquery.com/load-event/

Provare a collegare un gestore di eventi di carico al vostro "tutte le immagini" div. Se l'API deve essere considerata attendibile, quell'evento verrà attivato quando tutte le immagini secondarie verranno caricate.

Quindi avrei un qualche tipo di documento. Gestore già che nasconde le tue immagini e inserisce il testo "Caricamento ...", quindi il gestore di eventi load mostrerà le tue immagini e rimuoverà il testo di caricamento.

Spero che questo aiuti.