Heim > Web-Frontend > js-Tutorial > Tipps zum verzögerten Laden von JavaScript-Bildern in der Bibliothek Echo.js_javascript

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

WBOY
Freigeben: 2016-05-16 15:06:35
Original
1897 Leute haben es durchsucht

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:


 

2. HTML

Code kopieren Der Code lautet wie folgt:
pic

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
}); 
Nach dem Login kopieren
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!
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