jQuery, JavaScript, HTML: cómo cargar imágenes después de que todo lo demás se carga?

Question

Hola chicos, tengo una página muy compleja con muchos guiones y un tiempo de carga bastante largo. Además de esa página, quiero implementar el jquery Nivo Slider (http://nivo.dev7studios.com/).

En la documentación que dice que tengo que enumerar todas las imágenes para el control deslizante en el interior de un div # deslizador

<div id="slider"> 
    <img src="images/slide1.jpg" alt="" /> 
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a> 
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> 
    <img src="images/slide4.jpg" alt="" /> 
</div> 

Sin embargo puede ser que tenga 10 imágenes con un 1000x400px que es bastante grande. Esas imágenes se cargarían cuando se cargue la página. Como están en mi encabezado, esto podría llevar bastante tiempo.

Estoy buscando una forma de utilizar cualquier complemento de control deslizante de jquery (como el control deslizante nivo), pero carga dinámicamente imágenes o carga todas esas imágenes después de que todo lo demás en mi página se haya cargado.

¿Alguna idea de cómo podría resolver eso?

¿Hay alguna manera de iniciar un proceso de javascript después de que se haya cargado todo lo demás en la página? Si hay una forma en que pueda tener una solución para mi problema (usando el método jquery ajax load()) ... Sin embargo, no tengo idea de cómo esperar a que se cargue todo lo demás y luego iniciar el control deslizante con todas las imágenes.

Answer 1

Esto es lo que hicimos y está funcionando muy bien. Nos saltamos el atributo src de img y agregamos img-location a un atributo falso lsrc. A continuación, cargamos una imagen dinámica con el valor lsrc y establecemos src de la imagen real solo después de cargarla.

No se trata de una carga más rápida, pero se trata de mostrar las imágenes solo cuando se descarga por completo en su página, para que el usuario no tenga que ver esas molestas imágenes a medio cargar. Se puede usar una imagen de marcador de posición mientras se cargan las imágenes reales.

Aquí está el código.

$(function(){ 
    $.each(document.images, function(){ 
       var this_image = this; 
       var src = $(this_image).attr('src') || '' ; 
       if(!src.length > 0){ 
        //this_image.src = options.loading; // show loading 
        var lsrc = $(this_image).attr('lsrc') || '' ; 
        if(lsrc.length > 0){ 
         var img = new Image(); 
         img.src = lsrc; 
         $(img).load(function() { 
          this_image.src = this.src; 
         }); 
        } 
       } 
      }); 
    }); 

Editar: truco es para establecer el atributo src sólo cuando se carga en esa fuente img temporal.$(img).load(fn); maneja eso.

Answer 2

jQuery tiene una sintaxis para ejecutar javascript después documento ha cargado:

<script type="text/javascript"> 
jQuery(function(){ 

//your function implementation here... 

}); 
</script> 

Answer 3

check out carga jQuery() evento, que espera a todo, incluyendo gráficos

$(window).load(function() { 
    // run code 
}); 

de la carga, a continuación, podría cargar el imágenes utilizando:

var image = new Image(); 
image.src = "/path/to/huge/file.jpg"; 

Usted puede agregar una función onload a la imagen demasiado

image.onload = function() { 
    ... 
} 

Answer 4

Además de la respuesta de Xhalent, utilice la función .Append() en jQuery para añadirlos a la DOM:

Su HTML sólo tendría:

<div id="slider"> 
</div> 

Y luego su jquery sería:

jQuery(function(){ 
    $("#slider").append('<img src="images/slide1.jpg" alt="" />'); 
});