Tipps zum verzögerten Laden von JavaScript-Bildern in der Bibliothek Echo.js_javascript

Echo ist ein unabhängiges JavaScript-Tool zum verzögerten Laden von Bildern, das schnell und klein (weniger als 1 KB) ist und das HTML5-Datenattribut verwendet. Echo unterstützt IE8+.

Plug-in-Beschreibung: Wie Lazy Load ist auch Echo.js ein JavaScript zum verzögerten Laden von Bildern. Der Unterschied besteht darin, dass Lazy Load ein jQuery-basiertes Plug-in ist, während Echo.js nicht von jQuery oder anderen JavaScript-Bibliotheken abhängt und unabhängig verwendet werden kann. Und Echo.js ist sehr klein, weniger als 1 KB nach der Komprimierung.

Kompatibilität

Echo.js verwendet das Datumsattribut von HTML5 und muss den Wert dieses Attributs abrufen, daher ist es nicht mit IE6 und IE7 kompatibel. Obwohl Lazy Load auch das HTML5-Datumsattribut verwendet, ist die Methode zum Abrufen des Werts unterschiedlich.

Anwendung

　1. Dateien importieren

Code kopieren Der Code lautet wie folgt:

e186917f42360ce89b568cf30c2894c52cacc6d41bbb37262a98f745aa00fbf0

　

2. HTML

Code kopieren Der Code lautet wie folgt:

3b07d364e6c3d8e47cb51f97b541aee4

blank.gif ist ein 1 x 1-Bild, das als Standardbild verwendet wird, und der Attributwert von data-echo ist die tatsächliche Adresse des Bildes. Es ist auch am besten, die Breite und Höhe des Bildes festzulegen oder sie in CSS festzulegen, da sonst das Bild, das ganz unten zu sein scheint, beim Laden verzögert wird.

　

3. JavaScript

Echo.init({
offset: 0,
throttle: 0
}); 

Parameter

Parameter

Beschreibung

offset

参数	说明
offset	离可视区域多少像素的图片可以被加载
throttle	图片延迟多少毫秒加载

Wie viele Pixel vom sichtbaren Bereich entfernt kann ein Bild geladen werden

throttle

Wie viele Millisekunden verzögert sich das Laden des Bildes?

Der obige Inhalt ist für die JavaScript-Bild-Lazy-Loading-Bibliothek Echo.js. Ich hoffe, dass er für alle hilfreich ist!