Why lazy loading

Sometimes there will be a lot of pictures in the page, an image means an HTTP request, a JS file tens of K, a picture may be several M, too many pictures need a long loading time, after the completion of the loading of pictures, people have gone cold, lazy loading of pictures has a significant effect on improving user experience

Lazy loading principle

PNG =’default. PNG ‘. Add data-src(custom attribute) to point to the url of the real image

<img src='default.png' data-src='httt://www.xxx.com/images/001.jpg'>
Copy the code

Listen for scroll event, when the image appears in the viewable area, extract the value of data-src and assign it to SRC to load the real image

The implementation code

        let img = document.getElementsByTagName('img') // Set the starting image for each iteration to prevent repeated loadingletLazyLoad () window.onscroll = lazyLoadfunction lazyLoad() {
            let seeHeight = document.documentElement.clientHeight
            let scrollHeight = document.body.scrollHeight
            for (leti = n; i<img.length; i++) {if(img[i].src === 'default.png') {if(img[i].offsetHeight < seeHeight + scrollHeight){
                       img[i].setAttribute('src',img[i].getAttribute('data-src'))
                       n++
                   }
               }
            }
        }
Copy the code

That’s not all. LazyLode binding to the Scorll event causes high frequency triggering, which only increases browser stress and defeats our purpose, so we need to limit the event frequency

       let img = document.getElementsByTagName('img') // Set the starting image for each iteration to prevent repeated loadingletLazyLoad ()function lazyLoad() {
            let seeHeight = document.documentElement.clientHeight
            let scrollHeight = document.body.scrollHeight
            for (leti = n; i<img.length; i++) {if(img[i].src === 'default.png') {if(img[i].offsetHeight < seeHeight + scrollHeight){
                       img[i].setAttribute('src',img[i].getAttribute('data-src') n++}}}} //function debounce(fn,wait) {
            let timeout = null
            return function() {let context = this
                let args = arguments
                clearTimeout(timeout)
                timeout = setTimeout( function(){
                  fn.apply(context,args)
                },wait)                    
            }
        }
        window.addEventListener('scroll',debounce(lazyLoad,800),true)
Copy the code

The debounce function limits the trigger frequency of lazyLoad. If the scroll time is triggered again within the 800ms wait time, the time will be reset. That’s it? nonono! If we set wait to 2s, if the user keeps sliding the scroll bar and the time is reset, the effect will be that lazyLoad will not be executed and the image will not be loaded, which is unacceptable, so we need to set a time after which lazyLoad must be executed once, the term is called throttling, the code is as follows

       let img = document.getElementsByTagName('img') // Set the starting image for each iteration to prevent repeated loadingletLazyLoad ()function lazyLoad() {
            let seeHeight = document.documentElement.clientHeight
            let scrollHeight = document.body.scrollHeight
            for (leti = n; i<img.length; i++) {if(img[i].src === 'default.png') {if(img[i].offsetHeight < seeHeight + scrollHeight){
                       img[i].setAttribute('src',img[i].getAttribute('data-src') n++}}}} // throttlefunction throttle(fn,wait,mustTime){
            let timeout = null
            let startTime = new Date()
            let curTime
            return function() {let context = this
                let args = arguments
                curTime = new Date()
                if( (curTime - startTime) >= mustTime){
                     startTime = curTime
                    fn.apply(context,args) 
                    clearTimeout(timeout)    
                }else{
                    clearTimeout(timeout)
                    timeout = setTimeout( function(){
                        fn.apply(context,args)
                        startTime = new Date()
                    },wait)
                }
            }
        }
        window.addEventListener('scroll'The throttle (the lazyLoad, 2000300, 0))Copy the code