JavaScript image lazy loading library Echo.js_javascript tips

Echo is an independent JavaScript lazy image loading tool that is fast, small in size (less than 1k) and uses the HTML5 data- attribute. Echo supports IE8+.

Plug-in description: Like Lazy Load, Echo.js is also a JavaScript for lazy loading of images. The difference is that Lazy Load is a jQuery-based plug-in, while Echo.js does not depend on jQuery or other JavaScript libraries and can be used independently. And Echo.js is very small, less than 1KB after compression.

Compatibility

Echo.js uses the date attribute of HTML5 and needs to get the value of this attribute, so it is not compatible with IE6 and IE7. Although Lazy Load also uses the HTML5 date attribute, its method of obtaining the value is different.

How to use

　1. Import files

Copy code The code is as follows:

e186917f42360ce89b568cf30c2894c52cacc6d41bbb37262a98f745aa00fbf0

　2. HTML

Copy code The code is as follows:

3b07d364e6c3d8e47cb51f97b541aee4

blank.gif is a 1 x 1 image, used as the default image, and the attribute value of data-echo is the real address of the image. It is also best to set the width and height of the image, or set it in CSS, otherwise the image that seems to be very bottom will be delayed in loading.

　3. JavaScript

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

Parameters

Parameters

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

Description

offset

How many pixels away from the visible area can an image be loaded

throttle

How many milliseconds does the image load delay

The above content is for the JavaScript image lazy loading library Echo.js. I hope it will be helpful to everyone!