In modernen Webanwendungen sind Bilder zu einem der am häufigsten verwendeten Inhaltstypen geworden. Obwohl die Verwendung von Hintergrundbildern den visuellen Effekt der Anwendung verbessern kann, wirkt sich eine zu große Bildgröße ernsthaft auf die Anwendungsleistung aus.
Auch nach der Optimierung können Bilder immer noch viel Platz in Anspruch nehmen, was die Benutzer zu lange warten lässt. Wenn Benutzer nicht die Erfahrung des schnellen Zugriffs auf Inhalte erhalten, verlieren sie tendenziell Geduld und wenden sich an andere Websites, sodass ein effizientes Bildladungsschema von entscheidender Bedeutung ist.
In diesem Artikel werden fünf faule Bildlademethoden eingeführt, mit denen Sie Ihre Website optimieren und die Benutzererfahrung verbessern können. Diese Methoden eignen sich für alle Arten von Bildern, einschließlich Hintergrundbildern, Inline -Bildern und Bannerbildern.
Schlüsselpunkte
Was ist faul Laden?
LAUPS -Ladevorgang bedeutet asynchrones Laden von Bildern auf der Website. Der Inhalt kann nach Bedarf geladen werden, nachdem die Seite voll geladen wurde oder nur, wenn das Bild im Browserfenster angezeigt wird. Dies bedeutet, dass das Bild unten auf der Seite nicht einmal geladen wird, wenn der Benutzer nicht nach unten scrollt, wodurch die Anwendungsleistung letztendlich verbessert wird.
Für die meisten Websites ist es wichtig zu wissen, wie das faule Laden in HTML aktiviert werden kann. Versuchen Sie beispielsweise, Ihre bevorzugte Website mit HD -Fotos zu durchsuchen, und Sie werden bald feststellen, dass die Website nur eine begrenzte Anzahl von Bildern lädt. Wenn Sie die Seite nach unten scrollen, wird das Platzhalterbild schnell durch das tatsächliche Bild ersetzt.
Beachten Sie beispielsweise den Loader auf Unsplash.com: Scrollen Sie diesen Teil der Seite in die Anzeige aus. Der Platzhalter wird durch ein Foto vollständig ersetzt:
Warum müssen Sie das faule Laden von Bildern implementieren?
Lernen, wie faule Bilder laden können, ist wichtig, um die Webleistung zu optimieren, insbesondere auf Seiten mit vielen visuellen Inhalten. Hier sind einige Gründe, warum Sie faule Bilder für Ihre Website in Betracht ziehen sollten:
1.
Wenn Ihre Website JavaScript verwendet, um Inhalte anzuzeigen oder dem Benutzer eine Funktionalität zu bieten, ist es entscheidend, das DOM schnell zu laden. Das Skript wird normalerweise ausgeführt, nachdem das DOM voll geladen ist. Auf einer Website mit einer großen Anzahl von Bildern kann das faule Laden (oder asynchrones Laden) bestimmen, ob der Benutzer Ihre Website weiter stöbert oder verlassen kann.Da die meisten faulen Ladenlösungen nur Bilder laden, wenn der Benutzer zu einem Ort scrollt, an dem das Bild im Fenster sichtbar ist, werden diese Bilder niemals geladen, wenn der Benutzer diesen Ort niemals erreicht. Dies bedeutet, dass viele Bandbreiteneinsparungen gespeichert werden können, was für die meisten Benutzer, insbesondere für diejenigen, die Mobilgeräte und langsame Netzwerke verwenden, sehr vorteilhaft ist.
Wenn Sie JavaScript beherrschen, sollte die Implementierung Ihrer eigenen faulen Ladelösung kein Problem sein. Nichts gibt Ihnen mehr Kontrolle, als Ihren eigenen Code zu schreiben.
Oder Sie können im Web durchsuchen, um Wege zu finden oder sich einem Diskussionsforum anzuschließen und Ideen auszutauschen. Ich habe das Gleiche getan und diese fünf interessanten Wege gefunden.
1
Wenn ein Benutzer eine Webseite scrollt, ist das native faule Laden von Bildern und Iframes eine Möglichkeit, Inhalte direkt zu laden. Sie müssen nur das Attribut
Ihrem Bild und Iframe hinzufügen.Wie Sie sehen, besteht kein JavaScript, noch dynamisch den Wert des
-attributs ersetzen, verwenden Sie einfach normale HTML. Dieser Ansatz ist ein perfektes Beispiel für das Hinzufügen von faulen Lasten in HTML ohne zusätzlichen Overhead.
Mit loading="lazy" 'Laden' Eigenschaft können wir das Laden von Bildern und Iframien von Off-Screen-Bildern verzögern, bis der Benutzer auf die entsprechende Position auf der Seite scrollt. "Laden" kann die folgenden drei Werte annehmen:
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>Nach dem Login kopieren
faul: Sehr geeignet für faules Laden src
2.
Intersection Observer API ist eine moderne Schnittstelle, mit der Sie Bilder und andere Inhalte faul laden können.Folgendes ist die Einführung von MDN in diese API:
Intersection Observer API bietet eine Methode, um asynchron die sich überschneidenden Änderungen von Zielelementen mit Vorfahren Elementen oder Dokumentfenstern auf Top-Level zu beobachten.
Mit anderen Worten, die Schnittbeobachter -API überwacht den Schnittpunkt eines Elements mit einem anderen asynchron.
Denys Mishunov schrieb ein ausgezeichnetes Tutorial über den Schnittbeobachter und verwendete es für faule Ladenbilder. Hier ist seine Lösung:
Angenommen, Sie möchten eine Bildbibliothek faul laden. Die Markierungen für jedes Bild sind wie folgt:
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>Nach dem Login kopieren
Hier ist der Pfad zum Bild im Attribut data-src und nicht im Attribut src enthalten. Der Grund dafür ist, dass die Verwendung von src bedeutet, dass das Bild sofort geladen wird, was nicht das ist, was Sie wollen.
In CSS können Sie für jedes Bild einen min-height -Werwert angeben, z. B. 100px. Dies gibt jedem Bild -Platzhalter (IMG -Element ohne src Attribut) eine vertikale Dimension:
<img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>Nach dem Login kopieren
In der JavaScript -Dokumentation müssen Sie dann ein Konfigurationsobjekt erstellen und mit der intersectionObserver -Stanz registrieren:
img {
min-height: 100px;
/* more styles here */
}</pre>Nach dem Login kopieren Schließlich können Sie alle Bilder itererieren und zu dieser iterationObserver -Stanz hinzufügen:
// 创建配置对象：rootMargin和threshold是接口公开的两个属性
const config = {
rootMargin: '0px 0px 50px 0px',
threshold: 0
};
// 使用intersectionObserver实例注册配置对象
let observer = new IntersectionObserver(function(entries, self) {
// 迭代每个条目
entries.forEach(entry => {
// 只处理相交的图片。isIntersecting是接口公开的属性
if(entry.isIntersecting) {
// 将图片路径从data-src复制到src的自定义函数
preloadImage(entry.target);
// 图片现在已就位，停止观察
self.unobserve(entry.target);
}
});
}, config);</pre>Nach dem Login kopierenDer Vorteil dieser Lösung besteht darin, dass sie einfach zu implementieren, effizient und sich zu überschneiden. Observer übernimmt den größten Teil der Computerarbeit.
In Bezug auf die Browserunterstützung unterstützen alle Mainstream -Browser mit Ausnahme der IE 11 und Opera Mini die Schnittbeobachter -API in ihren neuesten Versionen.
Sie können mehr über die Intersection Observer API und diese Implementierungsdetails in Denys 'Artikel erfahren.
3
lozad.js Lazy Loading der JavaScript -Bibliothek 
lozad.js ist ein Hochleistungs-, leichter und konfigurierbarer fauler Lader, der reines JavaScript ohne Abhängigkeiten verwendet. Es ist ein hervorragendes Tool für das faule Laden von JavaScript, Bildern, Videos und Iframes, wenn Benutzer scrollen.
Sie können Lozad mit NPM/Garn installieren und mit dem Modulpacker Ihrer Wahl importieren:
const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
observer.observe(img);
});</pre>Nach dem Login kopierennpm install --save lozad yarn add lozad</pre>Nach dem Login kopieren
unten auf der HTML -Seite hinzufügen
</pre> Fügen Sie als nächstes für die grundlegende Implementierung die Klasse
zur Ressource im Tag hinzu: lozad
import lozad from 'lozad';</pre>Nach dem Login kopieren
<img src="https://img.php.cn/upload/article/000/000/000/173897821885662.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>Nach dem Login kopieren
Lozad ist eine großartige Option, wenn Sie nicht über die API für die Intersection Observer wissen möchten oder nur eine schnelle Implementierung für eine Vielzahl von Inhaltstypen suchen.
4.
Wenn Sie ein mittlerer Leser sind, müssen Sie bemerkt haben, wie die Site das Hauptbild im Beitrag lädt. Das erste, was Sie sehen, ist eine verschwommene Kopie mit niedriger Auflösung des Bildes, und seine hochauflösende Version ist faul geladen:
Sie können ähnliche Effekte erzielen, wenn faule Bilder in HTML mit CSS und JavaScript in HTML geladen werden.
Sie können Ihrem Bild diesen unterhaltsamen Unschärfeffekt auf verschiedene Weise hinzufügen.
Meine Lieblingsmethode ist die Craig Buckler -Methode. Hier sind alle Vorteile dieser Lösung:
Sie können alle relevanten Informationen in "So erstellen Sie Ihren eigenen progressiven Image Loader" und den Code im Github -Repository des Projekts herunter.
5 yall.js ist eine featurereichen JavaScript-Bibliothek, die die Intersection Observer-API verwendet, um JavaScript zu faulen, während Benutzer scrollen. Es unterstützt Bilder, Videos, Iframes und fällt bei Bedarf geschickt auf die traditionelle Event -Handler -Technologie zurück.
Wenn Sie Ihr Dokument in Ihr Dokument aufnehmen, müssen Sie es wie folgt initialisieren:
Als nächstes müssen Sie nur ein einfaches IMG -Element laden, Sie müssen nur Folgendes im Tag ausführen:
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /> <iframe loading="lazy" src="content.html"></iframe></pre>Nach dem Login kopieren
Bitte beachten Sie die folgenden Punkte:
<img src="https://img.php.cn/upload/article/000/000/000/173897821665537.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " /></pre>Nach dem Login kopieren
Sie fügen das Element die Klasse
lazy src Der Pfad des Bildes, den Sie faul laden möchten, befindet sich in der Eigenschaft data-src
Erhalten Sie eine hervorragende Leistung mit der Schnittstelle Observer API.
Schlussfolgerung
Hier finden Sie fünf faule Lademethoden, mit denen Sie mit dem Experimentieren und Testen in Ihrem Projekt beginnen können. Das Verständnis für faule Bilder ist eine wertvolle Fähigkeit für jeden Webentwickler. Sie können mehr über die Bildoptimierung erfahren, indem Sie sich diesem SitePoint -Forum anschließen oder Ihr Fachwissen mit anderen teilen.
Häufig gestellte Fragen zum Laden von faulen Bild
Was ist das faule Laden von Bildern?
Lazy Loading ist eine Webentwicklungstechnologie, die zur Verbesserung der Webseitenleistung verwendet wird, indem das Laden bestimmter Elemente, wie z. B. Bilder, bis sie benötigt werden, faul laden. Das Laden von Lazy -Bild bedeutet, dass das Bild nur dann geladen wird, wenn es in das Fenster des Benutzers eintritt oder auf der Webseite sichtbar ist, anstatt alle Bilder sofort zu laden, wenn die Seite ursprünglich gerendert wird. Was sind die Vorteile von faulen Ladenbildern? Wie laden Sie Bilder in HTML? Um faule Laden zu Bildern in HTML hinzuzufügen, können Sie die Eigenschaft "Laden" verwenden. Die Eigenschaft "Laden" ist eine Standard -HTML -Eigenschaft, mit der Sie steuern können, wenn Bilder geladen werden sollten. Setzen Sie den Wert der Eigenschaft "Laden" in "Lazy" in "Lazy" und fügen Sie sie dem IMG -Element hinzu. Dadurch wird der Browser angewiesen, das Bild nur zu laden, wenn es in das Fenster eintritt. Hier ist ein Beispiel: Ist es in Ordnung, das Bild faul zu laden? Ja, die Verwendung von faulen Ladebild -HTML in der Webentwicklung wird aus folgenden Gründen als vorteilhafte Praxis angesehen. Es beschleunigt das Rendern der Anfangsseiten und verbessert die Benutzererfahrung, indem das Laden nicht wesentlicher Bildbelastung verzögert wird. Dieser Ansatz spart Bandbreite und ist für Benutzer mit begrenzten Datenplänen oder langsameren Internetverbindungen von Vorteil. Darüber hinaus beeinflusst es positiv die Suchmaschinenoptimierung (SEO), indem es die Ladegeschwindigkeit der Seiten erhöht und dem Prinzip der inkrementellen Verbesserung entspricht. Durch die Reduzierung der wahrgenommenen Latenz und die Bereitstellung visueller Hinweise beim Laden hilft das faule Laden ein glatteres und effizienteres Browsing -Erlebnis, insbesondere auf mobilen Geräten. Woher kann man wissen, ob das Bild faul zu laden ist? Um zu bestätigen, dass Sie korrekt implementiert haben, wie faulen Bildern in HTML geladen werden, können Sie den HTML -Quellcode überprüfen oder Browser -Entwickler -Tools verwenden. Wenn Sie mit der rechten Maustaste auf das Bild klicken und Elemente auswählen oder überprüfen, können Sie das IMG-Element überprüfen, das das Bild im Bereich Developer Tools darstellt. Finden Sie, wenn das "Laden" -attribut im IMG -Element vorhanden ist. Wenn die Eigenschaft "Laden" auf "faul" eingestellt ist, bedeutet dies, dass das Bild als faul konfiguriert wurde. Mit dem Browser -Entwickler -Tool können Sie schnell den faulen Ladestatus des Bildes bestimmen, indem Sie die Eigenschaften des Bildes überprüfen. Wie verwendet ich JavaScript, um das Laden von faulen Bild zu erreichen? Um JavaScript zu verwenden, um das Laden von faulen Bild zu erreichen, können Sie Bibliotheken wie lozad.js oder yall.js verwenden, oder Sie können Ihre eigene benutzerdefinierte Lösung mithilfe der Schnittstelle -Beobachter -API schreiben. Mit diesen Bibliotheken können Sie Inhalte auf Bedarf laden, indem Sie überwachen, wenn Elemente das Fenster eingeben und in diesem Moment laden. Wird sich das Laden von Lazy im Bild von SEO auswirken? Ja, das Laden von Faulenbild kann sich positiv auf die SEO auswirken. Durch Erhöhen der Seitenladezeit und die Verringerung der Datenmenge, die zunächst geladen werden muss, kann das faule Laden Ihrer Website dabei helfen, in Suchmaschinenergebnissen bessere Ranglisten zu erzielen. Schnellere Seitengeschwindigkeiten sind ein Ranking -Faktor, das Suchmaschinen wie Google bekannt ist, und faules Laden kann dies erleichtern, indem sicherstellen, dass Ihre Website -Bilder die Gesamtleistung nicht verlangsamen. Was ist der Unterschied zwischen nativem faulen Laden und auf JavaScript-basiertem, faulem Laden? Native Lazy Loading basiert auf der integrierten Unterstützung des Browsers für die "Laden" -attribute in den Tags Gibt es einen Nachteil des faulen Ladens von Bildern? Der Hauptnachteil besteht darin, dass das Bild das Laden verzögern kann, wenn der Benutzer die Seite hinunter Scrollen. Darüber hinaus unterstützen einige ältere Browser möglicherweise nicht faulen Laden. Kann ich faule Bilder in WordPress laden? Ja, Sie können leicht faule Bilder in WordPress laden. Viele Themen unterstützen jetzt standardmäßig das native Lazy Loading, aber Sie können auch Plugins wie "Lazy Load by WP Rocket" oder "Smush" verwenden, um faulen Laden ohne Codierung zu erreichen. Das obige ist der detaillierte Inhalt von5 Techniken zum faulen Laden von Bildern zur Steigerung der Website -Leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
<img src="https://img.php.cn/upload/article/000/000/000/173897821515260.jpg" alt="5 Techniques for Lazy Loading Images to Boost Website Performance " />
<iframe loading="lazy" src="content.html"></iframe></pre>
<img alt="5 Techniken zum faulen Laden von Bildern zur Steigerung der Website -Leistung" > und <iframe></iframe>. Diese Methode ist einfach und erfordert kein zusätzliches JavaScript. Andererseits liefert das faule Laden basierend auf JavaScript (normalerweise mit Bibliotheken wie Lozad.js oder Intersection Observer API) eine größere Flexibilität und Anpassung.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
