Schrittweise können Sie faul Bilder mit Vanilla JS laden

Jede moderne Website muss schnell sein. Obwohl es viele Techniken und Plugins gibt, um die Seitengeschwindigkeit zu erhöhen, wissen Sie möglicherweise nicht, wo Sie anfangen sollen.

Das progressive Skript ist a eine großartige Ressource zur Steigerung der Seitengeschwindigkeit. Es funktioniert als lazy loading Bildskript, das Bilder progressiv lädt, wenn der Benutzer die Seite nach unten durchläuft.

Es ist ein kostenloses Open-Source-Projekt, sodass Sie es herunterladen und auf jeder Website ausführen können. Plus es Läuft auf 100% Vanilla JS, so dass es keine Abhängigkeiten gibt, die Sie beeinträchtigen könnten.

Sie können sich die Live-Demo auf der Progressive-Homepage ansehen.

Es unterscheidet sich ein wenig von anderen Lazy-Load-Skripten, da für die gesamte Seite feste Bildgrößen beibehalten werden. Diese verhindert den immer wieder störenden Seitensprung, den Sie immer dann sehen, wenn Bilder schnell in das Sichtfeld geladen werden und erhöhen Sie die Höhe des Inhalts.

Und die Platzhalter für Bilder sehen tatsächlich aus wie die Bilder, die Sie laden. Genial!

Diese ordentliche Technik gibt den Besuchern eine Chance Vorschau, wie die Bilder aussehen, bevor sie geladen werden. Es wird alles durch JavaScript gehandhabt, das den Standort des Benutzers auf der Seite prüft und Bilder vor dem Laden vorlädt.

Progressiv hat eine ziemlich umfangreiche API Es ist also eine gute Wahl für Webentwickler. Das Setup kann technisch sein, also hilft es, wenn Sie sich mit der grundlegenden Frontend-Codierung auskennen.

Weitere Informationen finden Sie auf der Hauptseite von GitHub, die die vollständige API-Dokumentation, Anweisungen zum Einrichten und Beispielcodeausschnitte enthält, die Sie für Ihre Projekte kopieren / einfügen können.

Wenn Sie ein vertrauenswürdiges, faul ladendes Bildskript ohne die unangenehmen Abhängigkeiten benötigen, geben Sie Progressive einen Schuss. Es ist völlig kostenlos und bietet viele Anpassungsmöglichkeiten für Entwickler.

Werfen Sie auch einen Blick auf den Progressively GitHub, um mehr zu erfahren und den herunterladbaren Quellcode zu finden.