Activación de la carga diferida de las imágenes después de que se han redimensionado las imágenes

Question

Estoy trabajando en una página que muestra varios cientos de imágenes a la vez. Estoy usando el Lazy Load plugin para permitir que la página se cargue rápidamente. Todo funciona a la perfección, sin embargo, he agregado un control deslizante jQuery UI para permitir a los usuarios ampliar/reducir las imágenes arrastrando un control. Si los usuarios reducen las imágenes, es posible que las imágenes que solían estar debajo del pliegue ahora se hayan movido al área visible. Como no se ha producido el desplazamiento, las imágenes no se cargan.

Agregué un evento para desencadenar la carga cuando se arrastra el control de cambio de tamaño, pero está causando que TODAS las imágenes se carguen y no solo las que ingresaron en el área visible.

El código es bastante sencillo:

Este es el código que cablear el plugin.

$("#pplImages.lazy").lazyload({event : "LoadVisibleImages"}); 

function LoadVisibleImages() { 
    $("#pplImages.lazy").trigger("LoadVisibleImages"); 
} 

Y aquí es el código que activa la carga del deslizador

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) {LoadVisibleImages();} 
}); 

Lo que estoy buscando es una manera de cargar sólo las imágenes que ahora son visibles y no todas las imágenes de la página.

¿Alguien puede ver lo que estoy haciendo mal?

Answer 1

Esto podría ser un problema con el complemento. Hay una gran cantidad de discusiones en las interwebs sobre este plugin que no funciona en los navegadores modernos.

Eche un vistazo a JavaScript Asynchronous Image Loader (JAIL). El autor lo escribió como una respuesta directa a este problema: Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL).

This example muestra un li disparando la carga de la imagen. Probablemente puedas modificar tu código para hacer lo mismo.

Trate de hacer esto:

1. Añadir un div oculto a su página con el id "disparador"
2. a tus ResizeImages funcionan para simular un clic en el objeto DOM gatillo
3. Cambiar la carga perezosa código para usar el complemento JAIL y configurarlo para cargar imágenes cada vez que se hace clic en el objeto desencadenante.

El código puede ser algo como esto:

JavaScript

$("#pplImages.lazy").jail({ 
    selector:'#trigger', 
    event: 'click' 
}); 

$("#slider").slider({ 
    min: 25, 
    max: 125, 
    value: 100, 
    slide: function(event, ui) { 
    ResizeImages(ui.value); 
} 
}).slider().bind({ 
    slidestop : function(event,ui) { 
     $('#trigger').click(); //Notice this simulated click event 
    } 
}); 

HTML (sólo tiene que añadir esto a su página)

<div id="trigger" class="hidden"></div> 

Tendrás para jugar a fin de que esto funcione perfectamente para usted pero el anterior debe comenzar.