Tengo una página muy compleja con muchos scripts y un tiempo de carga bastante largo. En la parte superior de esa página, quiero implementar jquery Nivo Slider ( http://nivo.dev7studios.com/ ).
En la documentación dice que tengo que enumerar todas las imágenes para el control deslizante dentro de un div#slider
<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, podría tener 10 imágenes con 1000x400px, que es bastante grande. Esas imágenes se cargarían cuando se carga la página. Dado que están en mi encabezado, esto puede llevar bastante tiempo.
Busco una manera de usar cualquier jquery Slider Plugin (como el control deslizante nivo) pero cargar imágenes dinámicamente o cargar 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 solucionar eso?
¿Hay alguna forma de iniciar un proceso de javascript después de que se haya cargado todo lo demás en la página? Si hay una manera en que podría 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.
Esto es lo que hicimos y funciona muy bien. Omitimos configurar el atributo src de img y agregamos img-ubicación a un atributo falso lsrc . Luego, cargamos una imagen dinámica con el valor lsrc y configuramos el src de la imagen real solo después de cargarla.
No se trata de una carga más rápida, sino de mostrar las imágenes solo cuando se descargan por completo en su página, para que el usuario no tenga que ver esas molestas imágenes cargadas a medias. 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: el truco es establecer el atributo src solo cuando esa fuente se carga en img temporal. $(img).load(fn); maneja eso.
Además de la respuesta de Xhalent, use la función .append() en jQuery para agregarlos al DOM:
Su HTML solo tendría:
<div id="slider"> </div>Y entonces tu jquery sería:
jQuery(function(){ $("#slider").append('<img src="images/slide1.jpg" alt="" />'); });echa un vistazo al evento jquery load(), espera todo, incluidos los gráficos
$(window).load(function () { // run code });al cargar, puede cargar las imágenes usando:
var image = new Image(); image.src = "/path/to/huge/file.jpg";También puede agregar una función onload a la imagen
image.onload = function() { ... }