jquery - plugin - ¿Cómo puedo controlar cómo Nivoslider precarga las imágenes?

slider html php

Question

Estoy usando el excelente complemento Nivoslider para mostrar un conjunto de fotos en mi página de inicio, actualmente 5. Todo funciona bien, pero cada foto agrega aproximadamente 150 K al peso de la página. De hecho, me gustaría mostrar cerca de 10 "diapositivas", pero como todas estas imágenes están precargadas en la apertura de la página, el peso de la página pronto se volverá (demasiado) grande, especialmente porque muchos usuarios probablemente no esperarán el "show". para terminar.

Me preguntaba si es posible no precargar imágenes, o mejor, solo x imágenes por delante. No puedo encontrar nada al respecto en la documentación, por lo que supongo que no se admite de forma nativa. ¿Algunas ideas?

Answer 1

¿Qué pasa si, de forma predeterminada en la carga de la página, inicializa el control deslizante con un subconjunto de las imágenes? ¿Después de lo cual crea dinámicamente las imágenes utilizando jQuery y reinicializa el control deslizante? Vea lo siguiente para un ejemplo usando una llamada ajax.

Nivoslider actualiza o reinicia o incluso destruye

Answer 2

El deslizador Nivo no tiene un precargador de imagen. Si está utilizando su control deslizante con el evento de carga jQuery (como en las demostraciones de nivo), el control deslizante nivo esperará hasta que todas las imágenes se carguen en la página.

$(window).load(function() {
        $(''#slider'').nivoSlider();
});

Si no desea esperar hasta que se carguen todas las imágenes, es posible que prefiera un evento preparado para documentos como se muestra a continuación. No se precargará ninguna imagen.

$(document).ready(function() {
   $(''#slider'').nivoSlider(); 
});

Si quieres tener una precarga controlada; Puedes usar uno de los plugins de precarga de imagen de jQuery como; http://www.farinspace.com/jquery-image-preload-plugin/

$(document).ready(function() {
   $(''#slider'').nivoSlider(); 
   //Before starting the slider preload your images then start your slider.
   $.imgpreload([''/images/a.gif'',''/images/b.gif''],
   {
    all: function()
    {
       //Start slider here
    }
   });
});

Answer 3

He estado buscando una solución similar. Tengo una galería de imágenes en un sitio web que carga una docena de imágenes de alta calidad en la página de inicio con un complemento de presentación de diapositivas. Y todas estas imágenes se están cargando al mismo tiempo, agregando 2-3 megas al peso de la página. No dados.

Nivo deja el manejo de la imagen hasta el navegador. Lee la <img src="..."> y luego coloca las imágenes en una presentación de diapositivas con efectos de transición pulidos. No hay nada en el código para controlar la carga o precarga de las imágenes.

Afortunadamente Nivo está en Github. Así que lo bifurqué para soportar la carga perezosa de imágenes:

https://github.com/leepowers/Nivo-Slider

El uso es el mismo. Con un pequeño cambio al HTML.

<div id="slider">
 <img src="my-large-image.jpg" alt="">
 <img src="my-large-image2.jpg" alt="">
 <img src="another-biggun.jpg" alt="">
</div>

Cambie los atributos de imagen de src atributos de src de data-src :

<div id="slider">
 <img data-src="my-large-image.jpg" alt="">
 <img data-src="my-large-image2.jpg" alt="">
 <img data-src="another-biggun.jpg" alt="">
</div>

Como data-src no se analiza, las imágenes no se cargan hasta que Nivo está listo para usarlas. data-src tiene prioridad sobre src que significa que puede especificar versiones de baja resolución en src para usuarios que no tienen javascript, o rellenar src con una imagen espaciadora para que el HTML pase un validador.

¡Echale un vistazo! Lo estoy implementando en varios proyectos. Una demostración está disponible aquí: http://powers1.net/files/nivo/demo/demo-lazy.html

Answer 4

La respuesta de Burak está bien para mí, pero no funciona en Safari. Intenté modificar y esta es mi solución:

$(window).ready(function() {
   $(''#slider'').nivoSlider(); 

Funciona correctamente en Safari, IE y Firefox. Por supuesto, puede agregar la precarga controlada.

Answer 5

Puede ocultar el #slider hasta que la página se cargue y luego cargar el div.

1. display:none; anexa display:none; al #slider en su archivo CSS.

2. Agregar $(''#slider'').css(''display'',''block''); en su $(window).load(function() {..}); junto con su código existente, por lo que se convierte en:

   $(window).load(function() {
       $(''#slider'').css(''display'',''block'');
   });

Answer 6

Puedes crear una función para poner las imágenes en una matriz y precargarlas.

jQuery.preloadImages = function() {   
 for(var i = 0; i<arguments.length; i++)   
{
      jQuery("<img>").attr("src", arguments[i]);   
}

}

y para usar la función, proporcione una matriz de urls de imágenes:

$.preloadImages("test.png", "/imageUrl");