Ist es eine gute Idee, jquery Funktion zu verwenden, die jede 500ms laufen?

Question

Ich habe eine Art von Lazy Load für Bilder erstellt. Es funktioniert wie folgt:

Alle 500ms überprüfen Sie photoes welche Sie auf dem Gerät sehen und wenn Sie sehen, beginnen Sie, echtes Bild zu laden, und diese Funktion wird nie für Bilder, die geladen, aber wenn Bild kann nicht geladen wird es erneut versuchen, wenn Sie sehen dieses Bild wieder.

Gibt es ein Problem, diese Art von Funktion alle 500ms zu verwenden?

Answer 1

Es klingt, als würden Sie dies als Reaktion auf die Bilder in Sicht kommen? Anstatt alle 500ms alle Bilder auf der Seite abzufragen, um zu sehen, ob sie in Sicht sind, wäre es vielleicht besser, die Prüfung nur auszulösen, wenn die Seite gescrollt hat (oder was auch immer bewirkt, dass Bilder gescrollt werden nicht häufiger zu sein, sobald als alle 500 ms, aber es hat den Vorteil:

1. Nicht ein 500ms Intervall Schleife die ganze Zeit
2. Nicht die Bilder im Hinblick auf die Überprüfung ausgeführt wird, die unnötig

I Ich gehe davon aus, dass die Bilder beim Scrollen des Benutzers ein- und ausgehen, also was Sie tun möchten in diesem Fall ist wie folgt:

1. Bind ein Ereignis $(window).scroll
2. es Haben Sie eine Veranstaltung nach einer festgelegten Zeit mit setTimeout (500ms in Ihrem Fall) feuern.
3. dass Timer abbrechen, wenn der Benutzer blättert wieder und starten Sie ihn (es mehrmals Brennen zu verhindern.
4. für die Veranstaltung Brennen Hören und Ihre Bildprüfeinheit dort ausführen.

Hier ist ein Beispiel dafür, wie könnte der Code aussehen:

var scrollIntervalTimeout; 
$(window).on('scroll', function() { 
    // Cancel the timeout and start it again 
    clearTimeout(scrollIntervalTimeout); 
    scrollIntervalTimeout = setTimeout(function() { 
    $(window).trigger('scrollDidEnd'); 
    }, 500); // 500ms delay before firing the event 
}); 

// Listen for the scrollDidEnd event 
$(window).on('scrollDidEnd', function() { 
    // Perform your image check here 
});