Wie funktioniert das Laden von Bildern mit JavaScript?

Hier ist ein How-To, mit Plugins: Ссылка hier ist die jquery plugin: Ссылка

Im Grunde genommen legen Sie ein Dummy-Bild in Ihr src -Attribut und fügen ein weiteres Attribut für das tatsächliche Bild hinzu. JS erkennt die Bildlaufposition der Seite und lädt die Bilddaten, sobald Sie nahe genug an das Bild kommen. Dies geschieht, indem Sie src durch die Quelle des tatsächlichen Bildes ersetzen.

Hier ist eine andere Erklärung: Ссылка

Und ein Beispiel, wie man das leicht macht.

Das "lazy.jpg" kann auf allen Bildern verwendet werden, was dazu führt, dass nur ein Bild geladen wird (und es ist ein 1x1px kleines Bild). Also, ich habe eine Liste von 250 Geschäften zu besuchen, mit einem Firmenlogo für jeden. Könnte so aussehen:

Dann kommt die Magie! Setzen Sie dies in Ihre Javascript-Datei:

Und wacka-wacka, all die faulen.jpg-Bilder werden durch ihre "echten" Bilder ersetzt. Der Zweck, Ihre HTML-Seite schneller zu laden (da diese 250 Firmen alle das gleiche "Logo" in lazy.jpg haben :) ... Aber das JS kümmert sich um alles nachdem DOM fertig geladen.

Dies ist natürlich eine jQuery-Lösung. Kann auch mit reinem js gemacht werden.

Sie können justlazy verwenden, was unabhängig von Abhängigkeiten wie jQuery und sehr leicht ist:

Der einzige Anruf, den Sie brauchen, ist:

Die Platzhalter müssen folgende Struktur haben:

Aus SEO-Gründen können Sie jeden anderen Platzhalter (z. B. Platzhalterbild) verwenden.

Zusätzlich gibt es eine Anleitung, wie man es benutzt und einige allgemeine Dinge über das verzögerte Laden von Bildern.

Es gibt viele Möglichkeiten, das Lazy Loading zu implementieren. Der Prozess ist nur, dass Sie laden, was Sie brauchen. Sie können etwas in der Softwareszene laden. Auf Websites verwenden die meisten es beim Laden in Bildern und es ist weil die meisten der Website ziemlich nur Bilder sind. Ich meine das Artwork der Website und die tatsächlichen Personen Bilder sie könnten Tausende von Bildern auf Ihrem Server haben. Dies führt normalerweise zu einer Verlangsamung, wenn Sie versuchen, alle gleichzeitig zu laden. Irgendwann beginnt es den Prozess zu verlangsamen. Lazy Loading wird normalerweise für große Websites durchgeführt. Wie ich schon sagte, Sie können dies auf verschiedene Arten tun. Ein Weg war bereits gegeben. Habe das img-Tag bereits geladen, aber der src-Teil zeigt auf eine Dummy-Datei, die klein ist. Verwenden Sie kein Bild, das Grafik oder ein Bild ist ... verwenden Sie etwas wie einen grauen Block .. oder könnte nichts verwenden. Wenn sich der Bildlaufteil in der Nähe des Bildlaufpunkts befindet, an dem sich die Bilder befinden. Es wird eine Funktion ausgeführt, bei der die src durch die echte Bildverknüpfung ersetzt wird. Eine andere Möglichkeit ist, ajax und den scroll-Punkt zu verwenden, wenn close angehängt wird ... lade den aktuellen HTML-Code mit dem Bild in der src ein. Das ist, was ich tatsächlich benutze. Ich schreibe eine PHP-Datei, um Bilder, Daten und Texte zu laden.

Der Sinn dieser Methode besteht darin, die Dateien bei Bedarf von einer Website herunterzuladen. Wenn ein Bild geladen wird, wird es tatsächlich von Ihrem Server heruntergeladen. Der Ladevorgang und die tatsächliche Ladezeit können sich also erhöhen, wenn Sie mit größeren und zu vielen Bilddateien beginnen.

  

Das verzögerte Laden von Bildern mithilfe der herkömmlichen Methode, Listener an Scroll-Ereignisse anzuhängen oder setInterval zu verwenden, ist sehr wenig performant, da jeder Aufruf von getBoundingClientRect () den Browser auf neu Layout die gesamte Seite und wird erhebliche Jank auf Ihrer Website vorstellen.

Verwenden Sie Lozad.js (nur 569 Byte ohne Abhängigkeiten), die < a href="https://developers.google.com/web/updates/2016/04/intersectionobserver"> InteractionObserver , um Bilder langsam zu laden.