Wie wird mit dem verzögerten Laden von Bildern auf einer großen Seite verfahren?

Question

Der aktuelle Ansatz, den wir verwenden, um faul Last: Bild

Server-Seite Vorlagen machen alle Bildelemente wie:

<img 
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
    data-src="http://static.com/img.jpg" 
    style="display: none;" 
/> 

wenn DOMContentLoaded Ereignis ausgelöst wird, dann erkennt JavaScript <img /> Elemente, die sind im Ansichtsfenster und ersetzen Sie src Attributwert durch den Wert data-src.

Problem:

Bilder auf der Titelseite erscheinen nicht, bis der gesamte DOM geladen wird. Da dies eine sehr große Seite ist (2MB HTML), dauert es ~ 3-5 Sekunden, bis das Ereignis DOMContentLoaded ausgelöst wird.

Was ich suche, ist eine JavaScript-Lösung, die es mir ermöglichen würde, die ersten 100 Bilder zu laden, sobald sie für die Manipulation im DOM verfügbar sind.

Answer 1

Was ich suche ist eine JavaScript-Lösung, die mir Last die ersten 100 Bilder, sobald sie für Manipulation im DOM verfügbar geworden ermöglichen würde.

Die Lösung, die ich implementiert habe, ist im Wesentlichen das.

Ich brauchte ein abstraktes Lazy-Loading-Skript, um die Neuindizierung bestehender Bilder auf der Seite zu ermöglichen. Ich würde damit beginnen, dieses Skript synchron vor allem anderen im Dokument zu laden. Von dem Moment an, in dem JavaScript funktionieren kann, startet das Skript ein Intervall, wenn es versucht, alle Bildelemente im DOM zu finden und zu prüfen, ob sie sich im Darstellungsbereich befinden. Wenn Elemente im Ansichtsfenster betrachtet werden, wird versucht, das Bildelement (data-src bis src) zu ändern. Dieses Intervall wird fortgesetzt, bis DOMContentLoaded ausgelöst wird.

In Bezug auf dem Code sieht es dies wie:

const LazyImageLoader = require('./LazyImageLoader'); 
const domReady = require('domready'); 

/** 
* The reason for using setTimeout instead of setInterval 
* is to not re-run revalidate more often than the body 
* of the function can be evaluated. 
*/ 
const createIntervalIterator = (callback, interval) => { 
    let currentTimeout; 

    const control = {}; 

    const iterator =() => { 
    const startTime = new Date().getTime(); 

    callback(); 

    const evaluationTime = new Date().getTime() - startTime; 

    const delayNextIteration = interval - evaluationTime; 

    currentTimeout = setTimeout(iterator, delayNextIteration); 
    }; 

    iterator(); 

    return() => { 
    clearTimeout(currentTimeout); 
    }; 
}; 

const iterationIntervalTime = 100; 

const lazyImageLoader = new LazyImageLoader({ 
    offset: 100, 
    selector: 'img[data-src]', 
}); 

/** 
* Revalidation ensures that all images are in LazyImageLoader index. 
*/ 
const revalidate =() => { 
    lazyImageLoader.revalidate(); 
}; 

const cancelInterval = createIntervalIterator(() => { 
    revalidate(); 
}, iterationIntervalTime); 

domReady(() => { 
    if (cancelInterval) { 
    cancelInterval(); 
    } 

    // Revalidate after domReady in case any images have been added 
    // to the DOM after the last `revalidate` invocation. 
    revalidate(); 
});