mostrar todas las imágenes sólo después de su carga completa

Question

En

<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> 

quiero mostrar todas las imágenes de id = "all-imágenes" sólo cuando todas las imágenes de esta identificación se carga por completo (jQuery).

Y antes de cargar todas las imágenes de esta sección muestra "Cargando .." Texto

Answer 1

Asumiendo que su div es pre-ocultos:

$("#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/

Intente conectar un controlador de eventos de carga a su "todas las imágenes" div. Si la API es de fiar, que evento se activa cuando se cargan todas las subimágenes.

Así que tendría algún tipo de controlador document.and ya que ocultará sus imágenes e insertará el texto "Cargando ...", luego su controlador de eventos de carga mostrará sus imágenes y eliminará el texto de carga.

Espero que esto ayude.