GOOCODE - Find your code/scripts

0 Echo.js is a standard stand-alone javascript image lazy loading (lazy loading) library. It is very small and fast, only 2KB. It uses HTML5's data-* attribute to delay the request to load image resources without relying on any third-party plugin libraries. Especially suitable for applications that need to load a large number of pictures on the mobile side.


how to use
1, the introduction of documents

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

2, HTML structure

<img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

Blank.gif is a 1 x 1 image used as the default image. The attribute value of data-echo is the real address of the image. You can set the width and height of the image, or set it in CSS, otherwise it seems that the image at the bottom and bottom is lazy.

3, javascript

echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
      console.log('loaded ok.');
    }
});

Common parameters and method description
Parameter == Description == Default
Offset==How many pixels of the image from the visible area can be loaded ==0
Throttle==How many milliseconds does the image delay load ==250
Debounce==anti-jump == true
Unload== tells echo whether to load or unload the image in the view, trigger when the image leaves the view area == false
Callback==callback function to detect if the image is loaded ==function()

Finally, echo.js also provides a .render() method, which is used as follows:

echo.render();

Application scenario: When your page does not scroll, and you want to load the image to be displayed, such as the image carousel, when the first image is displayed, then slide to display the second image, this time use echo.render() ; loading the second picture in advance, there will be no phenomenon that the picture loads the white screen.