Share
In diesem Tutorial zeige ich Ihnen, wie Sie mit in-view.js die Leistung Ihrer Webseiten verbessern können. Diese JavaScript-Bibliothek meldet sich zurück, wenn etwas in das Ansichtsfenster gerollt wurde, und hilft uns dabei, unsere Bilder dynamisch zu laden, wenn sie benötigt werden.
Webperformance ist wichtig, insbesondere wenn Ihre Website auf Entwicklungsländer abzielt, in denen die Verbindungen langsam sind und Datentarife teuer sind. Einige grundlegende Aufgaben, die wir zur Verbesserung der Leistung unserer Websites normalerweise ausführen, umfassen das Minimieren von JavaScript-Dateien und Stylesheets, das "Gippen" von Assets und das Komprimieren der Bildgröße. Danach sind wir fast alles festgelegt. Aber sind wir?
Ladezeit der Seite und Zeitleiste des Browser-InspektorsDas obige Inspector-Beispiel zeigt, dass eine einzelne Seite 24 Bilder in einem Ansichtsfenster mit Mobilfunkgröße bei normaler 3G-Geschwindigkeit lädt. Und wie wir sehen können, ist das Laden der Seite bei etwa elf Sekunden abgeschlossen! Dies ist sehr langsam, da es sich bei uns um eine einfache Seite handelt, die nur ein paar Bilder und ein Stylesheet enthält. Die Seite ist noch nicht mit Anzeigen verschmutzt. Außerdem werden keine Nachverfolgungsskripten verwendet, die der Seite normalerweise mehr Ballast hinzufügen.
Zu beachten ist auch, dass dies nur eine Nachahmung ist. Es berücksichtigt nicht einmal die Server-Konfiguration, Latenz und andere technische Hürden. Die Leistung könnte in der Realität sogar schlechter sein.
Wie können wir also die Leistung beim Laden von Seiten verbessern??
Zunächst einmal haben wir eine Reihe von Bildern. Der Grund für das langsame Laden unserer Seite ist, dass alle Bilder beim ersten Laden der Seite zusammenfluten. Wenn Sie sich das vorherige Bild genauer ansehen, werden Sie feststellen, dass dies nicht parallel geschieht. Einige Bilder werden erst dann geladen, wenn andere gerendert werden, wodurch die Seite insgesamt heruntergefahren wird.
Wenn wir eine große Anzahl von Bildern auf einer einzigen Seite haben, können wir das Laden dieser Bilder in Betracht ziehen asynchron und nur wenn der Benutzer sie benötigt. Dadurch kann der Browser die sichtbare Seite vollständig laden, ohne auf das Rendern aller Bilder warten zu müssen, wodurch letztendlich die Bandbreite des Anwenders gespart wird.
Um zu folgen, nimm die index-starter.html aus dem Repo. Es gibt auch eine begleitende css / styles-starter.css, die Sie ebenfalls verwenden können.
Zunächst müssen wir die Bildquellen durch ein sehr kleines Bild ersetzen, das vorzugsweise in base64 codiert ist, um zusätzliche HTTP-Anforderungen zu vermeiden. Wir verwenden dieses Bild als Platzhalter, bevor wir das eigentliche Bild liefern. Das heißt, wir müssen auch die tatsächliche Bildquelle in einem benutzerdefinierten Attribut namens speichern data-src.
Wenn Sie dies getan und die Seite aktualisiert haben, sollten Sie feststellen, dass die Bilder derzeit leer sind und ihre Abmessungen nicht unbedingt den endgültigen Bildern entsprechen.
Also lassen Sie uns die Stile korrigieren.
Die Bilder, die wir verwenden möchten, sind auf 800 x 550 Pixel eingestellt. Wir teilen die Bildhöhe (800px) um die Bildbreite (500px) und multiplizieren Sie dies mit 100%. Verwenden Sie das Ergebnis, um die Einstellung vorzunehmen Polsterung oben des Pseudoelements des Bildcontainers. Als letztes müssen wir die Bildposition auf einstellen absolut und stellen Sie die maximale Höhe auf 100%, damit wird die Höhe nicht gestützt.
Figur Position: relativ; Abbildung img top: 0; links: 0; Position: absolut; Max-Höhe: 100%; Abbildung: vor Padding-Top: 69,25%; // (554/800) * 100%
An diesem Punkt sollten die Bildabmessungen korrekt sein. Die echte Bildquelle befindet sich jedoch immer noch in einem benutzerdefinierten Attribut, sodass der Browser noch keine Bilder abrufen kann.
Das Bild hat das entsprechende Verhältnis, aber das Bild ist noch geladen.Im nächsten Schritt fügen Sie JavaScript hinzu, mit dem das Bild geladen wird.
Zunächst müssen wir in-view.js auf die Seite laden. Wie bereits erwähnt, erkennt diese einfache Bibliothek (die nicht von jQuery oder einer Kernbibliothek wie Waypoints abhängig ist), ob sich ein Element innerhalb oder außerhalb des Browser-Ansichtsfensters befindet.
Erstellen Sie nun eine neue JavaScript-Datei, in die wir unser JavaScript schreiben, und laden Sie es wie folgt in in-view.js:
Die in-view.js-Bibliothek macht die im Hinblick auf() Funktion, die einen Selektor als Argument verwendet. In diesem Fall bestehen wir die Zahl Element; das Element, das die Bilder umschließt. Wir wählen das Wrapper-Element aus, weil wir einige Klassen hinzufügen, um Stilübergänge durchzuführen. Dies ist einfacher, wenn sich die Klasse im Wrapper-Element und nicht im Image selbst befindet.
Accentsconagua
inView ('figure')Als nächstes benutzen wir die .auf() Methode, um das Element mit der eingeben Ereignis, um zu prüfen, ob sich das Element im Viewport befindet. In-view.js macht außerdem die Ausfahrt Ereignis, das das Gegenteil tut; Dies erkennt, wenn sich das Element außerhalb des Darstellungsbereichs befindet.
inView ('figure') .on ('enter', Funktion (figure) var img = figure.querySelector ('img'); // 1 if ('undefined'! == typeof img.dataset.src) / / 2 figure.classList.add ('is-loading'); // 3 // 4 newImg = new Image (); newImg.src = img.dataset.src; newImg.addEventListener ('load', function () figure.innerHTML = "; // 5 figure.appendChild (this); // 6 setTimeout (function () figure.classList.remove ('is-loading'); figure.classList.add ('is-loaded') ;, 300);););Das eingeben event löst eine Funktion aus, die Folgendes bewirkt:
Zahl.data-src Attribut.ladet zum Wrapper, Zahl, Element.data-src Attribut.ladet Klasse mit der ist geladen Klasse.Wie Sie dem obigen Code entnehmen können, haben wir zwei neue Klassen eingeführt ladet, und ist geladen. Wir nehmen das ladet Klasse, um eine Spinner-Animation hinzuzufügen, während das Bild geladen wird. Wir benutzen dann die ist geladen Klasse, wie der Name schon sagt, um dem Bild den Übergangseffekt hinzuzufügen, wenn das Bild vollständig geladen wurde.
figure.is-loaded img animation: fadeIn 0.38s linear 1s vorwärts; figure.is-loading position: relativ; figure.is-loading: after content: "; display: block; color: #ddd; font-size: 30px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius : 50%; Marge: auto; Position: absolut; oben: 50%; links: 50%; Margin links: -0.5em; Margin-top: -0.5em; transform: translateZ (0); Animation: Laden von 1.7s unendliche Leichtigkeit; @keyframes loading 0% transform: drehen (0 Grad); Box-Schatten: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em; 5%, 95% box-shadow: 0 -0,83em 0 -0,4em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0,44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em; 10%, 59% Box-Schatten: 0 -0,83em 0 -0,4em, -0,087em -0,825em 0 -0,42em, -0,173em -0,812em 0 -0,44em, -0,256em -0,789em 0 -0,46em, -0,297em -0,775em 0 -0,477em; 20% box-shadow: 0 -0,83em 0 -0,4em, -0,338em -0,758em 0 -0,42em, -0,555em -0,617em 0 -0,44em, -0,671em -0,488em 0 -0,46em, -0,749em -0,34em 0 -0,477em; 38 % box-shadow: 0 -0,83em 0 -0,4em, -0,377em -0. 74em 0 -0,42em, -0,645em -0,522em 0 -0,44em, -0,775em -0,297em 0 -0,46em, -0,82em -0,09em 0,0777em; 100% umwandeln: drehen (360 Grad); Box-Schatten: 0 -0,83em 0 -0,4em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0,44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em; @keyframes fadeIn 0% Deckkraft: 0; 100% Deckkraft: 1;
Hoffen Sie auf das Beste, aber planen Sie auf das Schlimmste. Nur wenn JavaScript irgendwie deaktiviert ist (ein seltener Fall, aber durchaus möglich), müssen wir sicherstellen, dass das Bild weiterhin angezeigt wird. Verwenden Sie die Element, wobei die Bildquelle unmittelbar auf die reale Bildquelle zeigt.
Wir sind alle da! Aktualisieren Sie die Seite. Wenn Sie die Netzwerk-Zeitleiste in DevTools überprüfen, können Sie feststellen, dass die Seitengeschwindigkeit jetzt erheblich verbessert wird, da wir nur das laden, was für die Benutzer sichtbar ist.
Schneller!Das Laden der Seite ist jetzt in nur 1,95 Sekunden bei normaler 3G-Geschwindigkeit abgeschlossen. mehr als eine 500% ige Geschwindigkeitsverbesserung!
In diesem Lernprogramm haben wir untersucht, wie Sie das Laden von Seiten verbessern können, indem Sie Bilder nur dann rendern, wenn sie vom Benutzer angezeigt werden. Diese Methode wird im Allgemeinen als "Lazy Loading" bezeichnet und kann die Leistung Ihrer Website enorm verbessern.
Es gibt viele JavaScript-Bibliotheken und jQuery-Plugins, die dies tun. Warum also in-view.js wählen? In-view.js war die Art von Skript, nach der ich gesucht habe, da es nicht zu viel versucht. Es behandelt nur eine Sache und macht es gut. Diese Art von Bibliothek bietet mehr Kontrolle und Flexibilität.
Zum Beispiel können wir in-view.js nicht nur für das langsame Laden verwenden, sondern auch für unendliche Bildlauffunktionen. Möglicherweise wird ein Floating-Abonnement-Formular angezeigt, wenn der Benutzer das Ende der Seite erreicht (take.) Schauen Sie sich die Demo an, um das in Aktion zu sehen), oder erstellen Sie eine vertikale Timeline, ohne eine weitere JavaScript-Bibliothek einlesen zu müssen. Lassen Sie uns wissen, wie Sie es verwenden!
Floating-Abonnementformular, das animiert wird, sobald der Benutzer das Seitenende erreicht