Front-End optimization-Picture lazy load

Lazy Load Introduction:

Popular Introduction: Lazy Load how lazy method, is that you do not want to see it, I do not bother to load out, lazy to request. The popular saying is that you do not give you, how to. A chestnut, for example, when entering a page, it will have a lot of pictures, some pictures may be below, when we point into the page but did not slide down or did not read the entire page, then the following picture will be "useless", loaded also white load, but also reduce the load speed of the Web page. Therefore, lazy loading allows the current picture to be loaded when scrolling to the viewable area.

Principle: Picture loading is caused by the value of SRC, when the SRC assignment browser will request picture resources, based on this, you can use the HTML5 property data-xxx to save the path of the picture, when we need to load the picture when the value of data-xxx to the SRC, The sauce can realize the picture of on-demand loading, that is lazy load.

Advantages: Improve the front-end performance, the picture when needed to load, reduce the burden of service, improve the loading speed of the page, can reduce bandwidth. Lazy Load Implementation mode:

1. Use of jquery-lazyload.js,jquery plug-ins for lazy loading use, you need to rely on jquery.

Jquery-lazyload.js Demo

2. Use Echo.js: Designed to implement lazy loading.

Echo.js Demo --jquery-lazyload.js Implementation mode:

1. Introduction: Introduction of jquery and Jquery-lazyload in HTML, such as:

<script type= "Text/javascript" src= "js/jquery-3.2.1.min.js" ></script>
<script type= "text/" JavaScript "src=" Js/jquery.lazyload.min.js ></script>

2. The SRC attribute is not used in the picture because the SRC attribute is used to send the request picture by default, using Data-original instead of:

 
3. Add jquery code:

<script type= "Text/javascript" >
    $ (function () {
        $ ("Img.lazy"). Lazyload ();
</script>
 
--Parameters of Jquery-lazyload.js: 
1.threshold: Set the threshold parameter to achieve the roll to the distance of its xx px load. Such as:

$ (function () {
     $ (' Img.lazy '). Lazyload ({
        threshold:100
    });
})
 
2.placeholder: For a picture path. This image is used to occupy the position of the picture to be loaded, when the picture is loaded, the bitmap will be hidden, such as putting some pictures waiting to be loaded to optimize the user experience effect.

$ (function () {
     $ ("Img.lazy"). Lazyload ({
        placeholder: "Images/loading.gif"
    })
 
3.event: When a defined event is triggered, the picture begins to load (click on the image to begin loading, and Mouseover,sporty,foobar (...) ）

$ (function () {
      $ ("Img.lazy"). Lazyload ({
            event: ' click '
      });
}
 
4.effects: The effect of the picture display, the default is show.

$ (function () {
      $ ("Img.lazy"). Lazyload ({
          effects: "FadeIn"
      })
 
5.container: value is a container. Lazyload by default when pulling the browser scroll bar, this parameter allows you to load a div's scroll bar in sequence when the picture

$ (function () {
        $ ("Img.lazy"). Lazyload ({
            container: $ ("#container") 
        })
 
 
6.failure_limit: Generally used when the picture is not continuous in the page, when scrolling the page, Lazy load will be recycled as the loaded picture. To detect whether a picture is in a viewable area in a loop, the plug-in stops looping by default when it finds the first picture that is not in the visible area. Such as:

$ (function () {
        $ (' Img.lazy '). Lazyload ({
           failure_limit:20
    });
})
 
This is set to 20 to stop the search if the plugin finds 20 pictures that are not in the visible area.

7.skip_invisible: To improve performance, the plugin ignores hidden pictures by default, or if you want to load hidden pictures. set Skip_invisible to false;

  $ (function () {
        $ (' Img.lazy '). Lazyload ({ 
            skip_invisible:false
    });
})
 
--ECHOJS Implementation mode: 
Introduction: Introduce jquery and jquery-lazyload in HTML, such as:

<script type= "Text/javascript" src= "Js/echo.min.js" ></script>
 
The SRC in the picture uses Data-echo instead of:

 
Add JS Code:

Echo.init ({
//Picture of how many pixels from the viewable region can be loaded
      offset:500, 
 //Picture delay how many milliseconds to load
   throttle:1000
});
 
- -ECHO has only two optional parameters:Offset: Images of how many pixels from the viewable area can be loaded throttle: How many milliseconds the picture delay load