Heim >Web-Frontend >js-Tutorial >Wer braucht AMP? Vereinfachen Sie den Prozess des verzögerten Ladens reaktionsfähiger Bilder mit Layzr.js
Wer braucht AMP? Vereinfachen Sie den Prozess des verzögerten Ladens reaktionsfähiger Bilder mit Layzr.js
- PHPzOriginal
- 2023-09-08 11:09:071457Durchsuche
Das Accelerated Mobile Pages (AMP)-Projekt von Google hat kürzlich dazu beigetragen, Websites schneller zu machen. Mit guter Technologie und einem starken Content-Delivery-Netzwerk macht Google AMP-erweiterte Websites direkt schneller. AMP funktioniert jedoch auch indirekt, indem es uns dazu ermutigt, einen Blick auf die Optimierungen und Best Practices zu werfen, die AMP enthält. Auch wenn Sie nicht vorhaben, Ihre Website AMP-kompatibel zu machen, ist es hilfreich, AMP als To-Do-Liste zur Optimierung von Nicht-AMP-Websites zu verstehen.
Eine der Optimierungen auf dieser Liste ist eine Technik namens „Lazy Loading“, die wir in unserem aktuellen Artikel über die Verwendung des benutzerdefinierten AMP-Elements
Lazy Loading ermöglicht es Besuchern, schneller mit Ihren Inhalten zu interagieren, während höhere Ladegeschwindigkeiten Ihr Suchmaschinenranking verbessern können. Je mehr Bilder Sie auf der Seite haben, desto größer ist der Geschwindigkeitsschub, den Sie erzielen.
In diesem Tutorial erfahren Sie, wie Sie Lazy Loading auf Nicht-AMP-Websites mithilfe eines Skripts namens Layzr.js bereitstellen. Wir werden die Funktionalität des <amp-img></amp-img>-Elements von AMP so weit wie möglich nachbilden, aber wir werden auch einige einzigartige Funktionen von Layzr verwenden.
Lass uns anfangen!
1. Grundeinstellungen
Im Rahmen des Artikels „Das AMP-Projekt: Wird Ihre Website schneller?“ habe ich ein Grundlayout mit fünf Bildern erstellt. Damit Sie die Verwendung von AMP mit der Bereitstellung von Lazy Loading selbst vergleichen können, erstellen wir dieselben fünf Bildlayouts neu. Ich werde Ihnen später in diesem Tutorial zeigen, wie Sie verschiedene Ladegeschwindigkeitstests durchführen.
In den Quelldateien, die diesem Tutorial beiliegen, finden Sie die AMP-Version des Layouts sowie die Vollversion, die Sie hier erstellen. Beide sind enthalten, um Ihnen bei der Entscheidung zu helfen, welche Methode für Sie am besten geeignet ist.
Während wir alles durchgehen, empfehle ich Ihnen, Ihre Arbeit mit den Chrome Developer Tools (F12) zu testen, die Registerkarte „Netzwerk“ zu öffnen, „Cache deaktivieren“ zu aktivieren und das Limit auf „Reguläres 3G“ festzulegen. Dies simuliert eine durchschnittliche Mobilfunkverbindung, zeigt Ihnen ein Diagramm jedes in Echtzeit geladenen Bildes und hilft Ihnen, sich ein klares Bild von der Leistung des verzögerten Ladens zu machen. Während Sie die Seite zum Testen aktualisieren, halten Sie die Schaltfläche „Neu laden“ gedrückt. Daraufhin wird ein Dropdown-Menü mit verschiedenen Optionen angezeigt. Wählen Sie „Cache leeren und Hard Reload“ aus, um einen Besucher vollständig zu simulieren, der zum ersten Mal auf Ihrer Website ankommt.
Beginnen wir mit den Grundlagen. Erstellen Sie zunächst einen Ordner für Ihr Projekt und erstellen Sie darin eine Datei mit dem Namen index.html.
Öffnen Sie es zum Bearbeiten und fügen Sie den folgenden Code hinzu:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Layzr.js Lazy Loading</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style>
body {
margin: 0;
}
img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Welcome to the lazy loaded web</h1>
</body>
</html>
Mit dem obigen Code erhalten wir lediglich eine HTML-Shell und fügen etwas CSS hinzu, um sicherzustellen, dass es keine unerwarteten Lücken rund um der Seite und des Bildes gibt. Wir fügen auch
hinzu, damit das Bild, das wir später hinzufügen, zentriert wird. Layzr wird geladen
Das Skript „layzr.js“ verfügt über zwei CDN-Ursprünge, die Sie einfach laden können – wir verwenden den von Cloudfare.
Fügen Sie diesen Code direkt vor dem schließenden body-Tag in Ihren HTML-Code ein.
<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.0.2/layzr.min.js"></script>
Wenn Sie das Skript nicht von einem CDN laden möchten, können Sie das Skript herunterladen und den kurzen Anweisungen folgen unter: https://github.com/callmecavs/layzr.js#downloadmargin: 0 auto;
Da wir Layzr nun geladen haben, müssen wir es beim Laden der Seite ausführen lassen. Fügen Sie dazu diesen Code nach dem
-Tag ein, das Sie gerade im vorherigen Abschnitt eingefügt haben:
<script>
const instance = Layzr()
document.addEventListener('DOMContentLoaded', function(event){
instance.update().check().handlers(true)
})
</script>
Dieser Code erstellt zunächst eine Instanz, die Layzr enthält, und verwendet dann nach dem Laden des DOM-Inhalts der Seite diese Instanz, um die Funktionalität von Layzr zu aktivieren.
Das obige ist der detaillierte Inhalt vonWer braucht AMP? Vereinfachen Sie den Prozess des verzögerten Ladens reaktionsfähiger Bilder mit Layzr.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse