Wie implementiert man das verzögerte Laden von Bildern in JavaScript?

Wie implementiert man das verzögerte Laden von Bildern in JavaScript?

Mit der Entwicklung des mobilen Internets nimmt die Anzahl der Bilder auf Webseiten zu, was zu einer langsameren Seitenladegeschwindigkeit und einer Verschlechterung des Benutzererlebnisses führt. Um dieses Problem zu lösen, wurde die Bild-Lazy-Loading-Funktion ins Leben gerufen. Lazy Loading von Bildern bedeutet, dass das Bild erneut geladen wird, wenn der Benutzer zur Bildposition scrollt, um die Ladegeschwindigkeit der Webseite zu verbessern. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript das verzögerte Laden von Bildern implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. Zuerst müssen wir ein bestimmtes Attribut markieren, damit das Bild verzögert geladen werden kann. In diesem Beispiel verwenden wir „data-src“ als Tag-Attribut und speichern die tatsächliche Adresse des Bildes in diesem Attribut.

<img src="placeholder.jpg" data-src="image.jpg" alt="Lazy Load Image">

2. Als nächstes müssen wir das Seiten-Scroll-Ereignis über JavaScript abhören und feststellen, ob das Bild in den sichtbaren Bereich gelangt.

function lazyLoadImages() {
    var lazyImages = document.querySelectorAll('img[data-src]');
    
    lazyImages.forEach(function(img) {
        if(isElementInViewport(img)) {
            img.src = img.getAttribute('data-src');
            img.removeAttribute('data-src');
        }
    });
}

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= window.innerHeight &&
        rect.right <= window.innerWidth
    );
}

window.addEventListener('scroll', lazyLoadImages);
window.addEventListener('resize', lazyLoadImages);

3. Wenn der Browser einen Bildlauf durch das Fenster durchführt oder dessen Größe ändert, werden die Ereignisse scroll und resize ausgelöst. In diesen beiden Ereignissen können wir lazyLoadImages Funktion zum Ermitteln und Laden von Bildern. <code>scroll 和 resize 事件，我们可以在这两个事件中调用 lazyLoadImages 函数来判断并加载图片。
4. 最后，在页面加载完成后立即执行一次 lazyLoadImages
Führen Sie abschließend die Funktion lazyLoadImages einmal direkt nach dem Laden der Seite aus, um die Bilder in den sichtbaren Bereich des ersten Bildschirms zu laden.

window.addEventListener('load', lazyLoadImages);

Durch die oben genannten vier Schritte können wir die Lazy-Loading-Funktion von Bildern implementieren. Wenn der Benutzer zur Bildposition scrollt, wird das Bild automatisch geladen, wodurch die Seitenladegeschwindigkeit verbessert wird.

Zusammenfassung:

Lazy Loading von Bildern speichert die tatsächliche Adresse des Bildes in einem bestimmten Attribut, hört auf Ereignisse beim Scrollen der Seite und bei der Größenänderung von Fenstern, um festzustellen, ob das Bild in den sichtbaren Bereich gelangt, und lädt das Bild basierend auf dem Beurteilungsergebnis. Diese Technologie ist besonders wichtig auf mobilen Geräten und in Umgebungen mit schlechter Netzwerkleistung, um das Benutzererlebnis zu verbessern und die Serverlast zu reduzieren.

Das Obige ist eine Einführung in die Implementierung der Lazy-Loading-Funktion von Bildern durch JavaScript und stellt entsprechende Codebeispiele bereit. Hoffe das hilft! 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man das verzögerte Laden von Bildern in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!