Implementierung des nativen faulen Ladens für Bilder in HTML

Native Lazy Loading ist eine integrierte Funktion des Browsers, die das faule Laden von Bildern ermöglicht, indem das Attribut "LaDing =" Lazy "zum -Tag addiert wird. 1. Es erfordert keine Bibliotheken von JavaScript oder Drittanbietern und wird direkt in HTML verwendet. 2. Es ist für Bilder geeignet, die nicht auf dem ersten Bildschirm unterhalb der Seite, die Bildschirm-Scrolling-Add-Ins und große Bildressourcen angezeigt werden. 3. Es ist nicht für Bilder geeignet, die erster Bildschirm oder Anzeige sind: keine; 4. Bei der Verwendung sollte es einen geeigneten Platzhalter festlegen, um Layout -Jitter zu vermeiden. 5. Es sollte das Laden von Responsive Bild in Kombination mit SRCSet- und Größenattributen optimieren. 6. Kompatibilitätsprobleme müssen berücksichtigt werden. Einige alte Browser unterstützen es nicht und können verwendet werden, um JavaScript -Lösungen als Backup zu erkennen und zu kombinieren.

Jetzt verwenden die meisten Webseiten Bilder, und die Bildladegeschwindigkeit wirkt sich direkt auf die Benutzererfahrung aus. Native Lazy Loading ist eine integrierte Browser-Funktion, mit der das Laden von Bildern in Seiten verzögert wird, bis sie das Ansichtsfenster eingeben und damit die Seitenleistung verbessern können.

Was ist ein natives faules Laden?

Native Lazy Loading ist eine von HTML bereitgestellte Funktion. Durch das Hinzufügen von loading="lazy" -Matchribut zum <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175225251530134.jpeg" class="lazy" alt="Implementierung des nativen faulen Ladens für Bilder in HTML" > -Tag wird der Browser automatisch das faule Laden von Bildern behandelt. Es erfordert weder JavaScript noch auf Bibliotheken von Drittanbietern und kann direkt in HTML implementiert werden.

Zum Beispiel:

 <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175225251321232.jpeg"  class="lazy"  src = "example.jpg" Alt = "Beispiel Bild" lade = "Lazy" alt="Implementierung des nativen faulen Ladens für Bilder in HTML" >

Dieser Ansatz funktioniert für die meisten modernen Browser, einschließlich Chrome, Edge, Firefox und Safari (teilweise unterstützt). Es ist jedoch zu beachten, dass einige ältere Versionen von Browsern sie möglicherweise nicht unterstützen, und Sie müssen zu diesem Zeitpunkt eine Fallback -Lösung in Betracht ziehen.

In welchen Situationen eignen sich es für die Verwendung von nativem faulen Laden?

Nicht alle Bilder eignen sich zum Aktivieren von faulen Laden. Die folgenden Situationen sind besonders geeignet:

• Bilder, die nicht auf dem ersten Bildschirm unten auf der Seite angezeigt werden: Abbildungen in der Mitte oder unten im Artikel.
• SCROLL ADD-In in der Bildergalerie: Inhalte, die Benutzer nur sehen, wenn sie nach unten scrollen.
• Große Bildressourcen: Bilder mit größerer Größe und längerer Ladezeit sind mehr eine verzögerte Belastung wert.

Nicht geeignete Szenarien umfassen:

• Bildschirmbild: Es wirkt sich auf das erste Ladeerlebnis aus.
• <img alt="Implementierung des nativen faulen Ladens für Bilder in HTML" > wird auf display: none oder Bilder, die im Dokumentstrom nicht nicht vorliegen: Lazy Ladeverhalten kann unvorhersehbar sein.

Wie benutze ich das native faule Laden richtig?

Es ist eigentlich sehr einfach zu bedienen. Fügen Sie einfach loading="lazy" zum <img alt="Implementierung des nativen faulen Ladens für Bilder in HTML" > -Tag hinzu. Um jedoch die besten Ergebnisse zu gewährleisten, müssen einige Details darauf geachtet werden:

Richten Sie den richtigen Platzhalter ein

Wenn das Bild nicht auf eine feste Höhe oder Breite eingestellt ist, kann es zu Layout -Verstürmen führen. Es wird empfohlen, eine Mindesthöhe für den Bildbehälter festzulegen oder CSS zu verwenden, um das Seitenverhältnis anzugeben.

Zum Beispiel:

 IMG [ladern = "Lazy"] {
  Breite: 100%;
  Höhe: Auto;
  Min-Höhe: 200px;
}

Kombination von SRCSet- und Größeneigenschaften

Wenn Ihre Bilder das Responsive -Design unterstützen, denken Sie daran, sie mit srcset und sizes zu verwenden, damit der Browser die am besten geeignete Bildquelle entsprechend der Gerätegröße auswählt und gleichzeitig faule Ladeeigenschaften beibehält.

Beispiel:

 <img 
  src = "small.jpg" 
  srcset = "small.jpg 500W, Medium.jpg 1000w, Large.jpg 1500W" 
  Größen = "(max-Width: 600px) 480px, 800px" 
  Alt = "Responsive Bild" 
  Laden = "faul"
>

Betrachten Sie Kompatibilitätsprobleme

Obwohl die Mainstream -Browser bereits unterstützt werden, wird loading="lazy" in einigen alten Systemen oder Browsern mit niedrigerer Version ignoriert. Für eine bessere Kompatibilität können Sie JavaScript Lazy -Ladenbibliotheken als Fallback -Lösung kombinieren oder sie nur in unterstützten Umgebungen aktivieren.

Sie können feststellen, ob es es durch die Funktionserkennung unterstützt:

 if ('laden' in htmlimageElement.prototype) {
  // Native Lazy Loading} else {unterstützen {
  // Verwenden Sie stattdessen das JS -Schema}

Zusammenfassung

Native Lazy Loading ist eine einfache und effektive Möglichkeit, um die Bildlastleistung zu optimieren. Solange Sie es an der richtigen Stelle verwenden und auf Kompatibilität und Layout -Stabilität achten, können Sie die Seitenladegeschwindigkeit erheblich verbessern. Grundsätzlich ist alles, nicht kompliziert, aber es ist leicht, Details zu ignorieren.

Das obige ist der detaillierte Inhalt vonImplementierung des nativen faulen Ladens für Bilder in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!