So optimieren Sie das Laden von Bildern

Es gibt eine große Anzahl von Bildern auf einer Seite (große E-Commerce-Website) und das Laden ist sehr langsam. Die folgenden Methoden können das Laden dieser Bilder optimieren und den Benutzern geben eine bessere Erfahrung.

1. Lazy Loading von Bildern , scrollen Sie zur entsprechenden Position, bevor Sie das Bild laden. (Abstand von obenSie können im unsichtbaren Bereich auf der Seite ein Scrollbar-Ereignis hinzufügen, um den Abstand zwischen der Bildposition und dem Browserund der Seite zu bestimmen, falls Ersteres ist kleiner als Letzteres und wird zuerst geladen Das vorherige und das nächste Bild werden zuerst angezeigt.

3. Verwenden Sie CSSsprite, SVGsprite, Iconfont, Base64 und andere Technologien, wenn das Bild ein CSS-Bild ist. 4. Wenn das Bild zu groß ist, können Sie beim Laden ein besonders komprimiertes Miniaturbild laden, um das Benutzererlebnis zu verbessern.

5.

Wenn der Bildanzeigebereich

kleiner als die tatsächliche Größe des Bildes ist, wird es zuerst verarbeitet Auf der Serverseite wird die Bildkomprimierung entsprechend den Geschäftsanforderungen angepasst. Die Größe des komprimierten Bildes stimmt mit der Anzeige überein.

Das obige ist der detaillierte Inhalt vonSo optimieren Sie das Laden von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!