Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine kurze Analyse der Fähigkeiten zum Preloading/Lazy Loading_Javascript von js

WBOY
Freigeben: 2016-05-16 16:35:28
Original
1010 Leute haben es durchsucht

Vorlader Es gibt im Allgemeinen zwei gängige Methoden zum Vorladen: xhr und dynamisches Einfügen von Knoten. Das dynamische Einfügen von Knoten ist die einfachste und am weitesten verbreitete Methode zum asynchronen Laden. Dann werden die mit der Methode des dynamisch eingefügten Knotens geladenen Dateien sofort nach dem Laden ausgeführt Andererseits kann es zu einer Änderung der Seitenstruktur kommen, und die Ausführung von CSS verändert mit größerer Wahrscheinlichkeit die gesamte Seite. Obwohl die xhr-Methode das Skript aufgrund von Einschränkungen in derselben Domäne nicht ausführt

Die Lazy-Loader-Methode ist auf einigen Websites mit vielen Bildern sehr nützlich. Bilder außerhalb des sichtbaren Bereichs des Browsers werden erst geladen, wenn der Benutzer auf der Seite dorthin scrollt, wo sie sich befinden, z. B. bei Websites mit vielen Bildern Längere Webseiten können schneller geladen werden und Serverbandbreite sparen. Es gibt auch Plugins in jQuery-Plugins, um diese Funktionalität zu erreichen.

Diese Technologie wird im QQ-Bereich und bei Weibo von Tencent verwendet. Auf Websites mit einer großen Anzahl von Besuchen kann dies die Belastung des Servers relativ verringern und nur dann Anfragen stellen, wenn der Benutzer auf den sichtbaren Bereich und die folgenden Inhalte zugreift. Anstatt die gesamte Seite auf einmal herunterzuladen, wartet der Benutzer darauf, dass der Inhalt während des Downloadvorgangs präsentiert wird.

Verwenden Sie new Image().src im IE, um Dateien vorab zu laden.
Andere Browser verwenden dynamisch eingefügte document.createElement('object')-Tags, um den Ladevorgang abzuschließen.

Beschreibung:
1. Der Grund, warum new Image().src in ff nicht verwendet werden kann, liegt darin, dass ff einen separaten Cache für Bilder implementiert. Gleichzeitig scheinen Safari und Chrome nicht zwischengespeichert zu sein.
2. Dynamisch eingefügte Objekt-Tags müssen in den Nicht-Kopf-Teil eingefügt werden, um das Laden auszulösen.
3. In IE7 und IE8 können Sie auch dynamische Objekte verwenden, um Dateien über Code zu laden.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage