Simple JavaScript Image Lazy Loading Library Echo.js
Add-ons
Plugin Description: Like Lazy Load, Echo.js is also a JavaScript library for lazy-loading images. The difference is that Lazy Load is a jQuery plugin, while Echo.js does not depend on jQuery or any other JavaScript library and can be used independently. Echo.js is also extremely lightweight, with a compressed size of less than 1 KB.
Compatibility
Echo.js uses the HTML5 data attribute and needs to retrieve its value, so it is not compatible with IE6 or IE7. Although Lazy Load also uses the HTML5 data attribute, it retrieves the value differently.
Usage
1. Include the 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 pixel image used as the default image. The data-echo attribute specifies the actual image URL. It is also recommended to set the image width and height, either directly or through CSS. Otherwise, it seems that only images very far down the page will be lazy-loaded.
3、JavaScript
1 2 3 4 | Echo.init({ offset: 0, throttle: 0}); |
Parameters
| Parameters | Description |
|---|---|
| offset | The number of pixels before an image enters the viewport at which it can be loaded |
| throttle | The delay in milliseconds before an image is lazy-loaded |
评论