JS realizes lazy loading of pictures

Recently, I need to build a small website , But what? , Because there are more pictures , Opening web pages is slow , The server will be under great pressure . It not only affects the rendering speed, but also wastes bandwidth , For example, a 1M Size picture , Concurrent , achieve 1000 Concurrent , That is, at the same time 1000 Personal visit , It will produce 1 individual G The bandwidth of the . So I thought of lazy image loading to reduce the pressure on the server , Load the content of the visual area first , Other parts are loaded after entering the visual area , To improve performance , It can greatly improve the loading speed of web pages , The effect is obvious , So I thought about recording this method , Convenient for later use or people in need , Methods and functions are available for personal testing .

One 、 principle
First the img Labeled src Link to same picture （ It's usually loading.gif picture ）, And then to img label Set custom properties （ data-src）, Then store the real picture address in data-src in , When JS When listening to the image element entering the visual window , Store the address in the custom attribute in src Properties of the . Achieve the effect of lazy loading . This prevents the page from sending a large number of requests to the server at one time , Result in server response surface , Page jam crash, etc .

Two 、 Realization
Webpage loading.gif material ：​ ​http://www.sucaijishi.com/2013/gif_0527/57.html​
<a  href="javascript:;" class="img" rel="nofollow" >
       <img src="/static/images/utils/loading.gif" th:data-src="${goodList.goodsImg}">
  </a> 

// Depend on jquery

<script>
    // When there is no scrolling at first , The image that appears in the window will also be loaded
    start();

    // When the page starts scrolling , Traverse images , If the picture appears in the window , Just load the picture
    var clock; // Function throttling
    $(window).on('scroll',function(){
        if(clock){
            clearTimeout(clock);
        }
        clock = setTimeout(function(){
            start()
        },200)
    })

    function start(){
        $('.img img').not('[data-isLoading]').each(function () {
            if (isShow($(this))) {
                loadImg($(this));
            }
        })
    }

    // Function to determine whether the picture appears in the window
    //$node.offset().top  by $node Offset value to the top of the document
    //$(window).scrollTop()    The distance from the scroll bar to the top of the window
    //$(window).height()+$(window).scrollTop();    Visual window

//JQ Of offset().top And js Of offsetTop Detailed explanation
    function isShow($node){
        return $node.offset().top <= $(window).height()+$(window).scrollTop();
     
    }

    // Functions for loading pictures , That is to put custom attributes data-src The real picture address stored , Assign a value to src
    function loadImg($img){
        $img.attr('src', $img.attr('data-src'));

        // Already loaded pictures , I set a property for it , The value is 1, As identification
        // The original intention of doing this is because , Every time you scroll , All the pictures will be traversed , This is a bit wasteful , So make a sign , When scrolling, only traverse the pictures that have not been loaded
        $img.attr('data-isLoading',1);
    }

</script>
 

3、 ... and 、 You can also use lazysizes No matter how lazy the plug-in is , Details refer to ：Lazysizes.js How to use lazy image loading   or    lazysizes/README.md at gh-pages · aFarkas/lazysizes · GitHub

<div class="img-wrap">
    <img  class="lazyload" data-src="https://14528923.s61i.faiusr.com/4/AD0Im_P2BhAEGAAgsojEzAUoyvSs1AIwqwM4qgM.png.webp"    />
<img  class="lazyload" data-src="https://www.colamark.cn/images/guest02.jpg"    />
      
  </div>
    
    
    <script src="http://afarkas.github.io/lazysizes/lazysizes.min.js"></script>