Take you to understand the lazy loading of pictures

Lazy loading principle

A picture is a <img> label , Whether the browser initiates a request for a picture is based on <img> Of src attribute , So the key to lazy loading is , When the picture doesn't enter the visual area , Not yet <img> Of src assignment , So the browser won't send the request , Wait until the picture enters the visual area src assignment .

The principle of lazy image loading is that we set the image first data-src attribute （ Of course, it can also be any other , As long as it doesn't send http

Just ask , The function is to access the value ） Value is its picture path , Because it's not src, So it will not be sent http request . Then we calculate the page scrollTop

The sum of the height of and the height of the browser , If the picture is an example, the coordinates at the top of the page

Y（ Relative to the whole page , Not the browser window ） Less than the sum of the first two , It shows that the picture is about to be displayed （ The right time , It could be Other situations ）, Then we will data-

src Property is replaced with src Attribute is enough

js Code ：

// onload Is to bind events after all resource files are loaded 

window.onload = function(){

    //  Get a list of pictures , namely img Tag list 

    var imgs = document.querySelectorAll('img');

    //  Get the distance to the top of the browser 

    function getTop(e){

        return e.offsetTop;

    }

    //  Lazy loading implementation 

    function lazyload(imgs){

        //  Height of visible area 

        var h = window.innerHeight;

        // Scroll area height 

        var s = document.documentElement.scrollTop || document.body.scrollTop;

        for(var i=0;i<imgs.length;i++){

            // When the distance between the image and the top is greater than the sum of the visible area and the scrolling area, the image will be loaded lazily 

            if ((h+s)>getTop(imgs[i])) {

                //  The truth is that the page starts with 2 Second blank , So use setTimeout timing 2s

                (function(i){

                    setTimeout(function(){

                        //  Execute the function immediately without adding i It will be equal to 9

                        //  Load pictures or other resources invisibly ,

                        // Create a temporary picture , This picture will not go to the page in memory . Realize invisible loading 

                        var temp = new Image();

                        temp.src = imgs[i].getAttribute('data-src');// Only once 

                        // onload Judge that the picture is loaded , The picture is loaded , Assigned to it again dom node 

                        temp.onload = function(){

                            //  Get custom properties data-src, Replace the fake picture with the real picture 

                            imgs[i].src = imgs[i].getAttribute('data-src')

                        }

                    },2000)

                })(i)

            }

        }

    }

    lazyload(imgs);

    //  Scrolling function 

    window.onscroll =function(){

        lazyload(imgs);

    }

}