Simple Javascript image lazy loading library Echo.js

Introduction:

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.

1. Import files

<script src="js/echo.min.js"></script>

2.html

<img src="images/blank.gif" alt="pic" data-echo="img/pic.jpg" width="640" height="480"> 
blank.gif is a 1 x 1 image using As the default image, 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

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

Demo URL: 

http://www.dowebok.com/53.html