Plugin Description: Like Lazy Load, Echo.js is a JavaScript for lazy loading of images. The difference is that Lazy Load is a jQuery-based plugin, 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, it gets the value in a different way.
Instructions
1. Import files
|
1
|
<
script
src
=
"js/echo.min.js"
></
script
>
|
2、HTML
|
1
|
<
img
src
=
"images/blank.gif"
alt
=
"pic"
data-echo
=
"img/pic.jpg"
width
=
"640"
height
=
"480"
>
|
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 and very bottom will be lazy loaded.
3、JavaScript
|
1
2
3
4
|
Echo.init({
offset: 0,
throttle: 0
});
|
parameter
| parameter | illustrate |
|---|---|
| offset | How many pixels away from the viewable area the image can be loaded |
| throttle | how many milliseconds the image delays to load |