Trigger caricamento lento delle immagini dopo che le immagini sono state ridimensionate

Question

Sto lavorando a una pagina che visualizza diverse centinaia di immagini contemporaneamente. Sto utilizzando lo Lazy Load plugin per consentire il caricamento rapido della pagina. Tutto funziona perfettamente, tuttavia ho aggiunto un dispositivo di scorrimento dell'interfaccia utente jQuery per consentire agli utenti di ingrandire/ridurre le immagini trascinando una maniglia. Se gli utenti riducono le immagini, è possibile che le immagini che prima erano sotto la piega siano state spostate nell'area visibile. Poiché lo scorrimento non si è verificato, le immagini non vengono caricate.

Ho aggiunto un evento per attivare il caricamento quando il quadratino di ridimensionamento viene trascinato ma causa il caricamento di TUTTE le immagini e non solo di quelle che sono state inserite nell'area visibile.

il codice è abbastanza semplice:

Ecco il codice per cablare il plugin.

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

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

E qui è il codice che attiva il caricamento dal Slider

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

Quello che sto cercando è un modo per caricare solo le immagini che sono ora visualizzabili e non tutte le immagini della pagina.

Qualcuno può vedere cosa sto facendo male?

Answer 1

Questo potrebbe essere un problema con il plug-in. C'è molta discussione sulle interwebs su questo plugin che non funziona nei browser moderni.

Dai uno sguardo allo JavaScript Asynchronous Image Loader (JAIL). L'autore lo ha scritto come risposta diretta a questo problema: Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL).

This example mostra un li che attiva il caricamento dell'immagine. Probabilmente puoi modificare il tuo codice per fare lo stesso.

Prova questo fuori:

1. Aggiungi un div nascosti alla tua pagina con l'id "trigger"
2. Imposta il tuo ResizeImages funzione per simulare un clic sull'oggetto grilletto DOM
3. Cambia il carico pigro codice per utilizzare il plugin JAIL e impostarlo per caricare le immagini ogni volta che si fa clic sull'oggetto trigger.

Il codice può essere simile a questa:

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 (basta aggiungere questo alla vostra pagina)

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

Avrai armeggiare per farlo funzionare perfettamente tu, ma sopra, dovresti iniziare.