Auslöser Lazy Laden von Bildern nach der Größe der Bilder

Question

Ich arbeite an einer Seite, die mehrere hundert Bilder auf einmal anzeigt. Ich verwende die Lazy Load plugin, um die Seite schnell laden zu können. Alles funktioniert perfekt, aber ich habe einen jQuery UI Slider hinzugefügt, um Benutzern das Vergrößern/Verkleinern von Bildern durch Ziehen eines Ziehpunkts zu ermöglichen. Wenn Benutzer Bilder verkleinern, ist es möglich, dass Bilder, die sich unterhalb der Falte befanden, nun in den sichtbaren Bereich verschoben wurden. Da das Scrollen nicht erfolgt ist, werden die Bilder nicht geladen.

Ich habe ein Ereignis hinzugefügt, um das Laden auszulösen, wenn das Größenänderungs-Ziehpunkt gezogen wird, aber es bewirkt, dass ALLE Bilder geladen werden und nicht nur diejenigen, die in den sichtbaren Bereich eingetreten sind.

Der Code ist ziemlich einfach:

Hier ist der Code ist das Plugin zu verdrahten.

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

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

Und hier ist der Code, der das Laden von der Slider

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

löst Was ich suche einen Weg gibt, nur die Bilder zu laden, die jetzt sichtbar und nicht alle Bilder auf der sind Seite.

Kann jemand sehen, was ich falsch mache?

Answer 1

Dies könnte ein Problem mit dem Plugin sein. Es gibt eine Menge Diskussionen über die Interwebs über dieses Plugin, die in modernen Browsern nicht funktionieren.

Werfen Sie einen Blick auf JavaScript Asynchronous Image Loader (JAIL). Der Autor schrieb es als direkte Antwort auf dieses Problem: Reasons why I wrote the plugin Jquery Asynchronous Image Loader (JAIL).

This example zeigt eine Li, die das Laden des Bildes auslöst. Sie können Ihren Code wahrscheinlich ändern, um dasselbe zu tun.

Probieren Sie dies aus:

1. eine versteckte div auf Ihre Seite mit der ID „Trigger“ hinzufügen
2. Legen Sie Ihre ResizeImages Funktion
3. ändern faul Last einen Klick auf den Auslöser DOM-Objekt zu simulieren Code, um das JAIL-Plugin zu verwenden und es so zu setzen, dass Bilder geladen werden, wenn auf das Trigger-Objekt geklickt wird.

Ihr Code kann wie folgt aussehen:

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 (nur diese zu Ihrer Seite hinzufügen)

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

Sie müssen herumzubasteln, damit das perfekt funktioniert Sie aber das oben genannte sollten Sie beginnen.