圖片懶加載-Vue插件實現

懶加載原理和實現

原理分析

• 先將img標籤的src鏈接設爲同一張圖片(默認圖片)，當js監聽到該圖片進入可是窗口時，再將實際地址應用。

實現方法

• 判斷元素是否在可視範圍

​
/**

* 判斷元素是否在可視範圍

*/

function isVisible(ele){

    let windowHeight = window.innerHeight

    let position = ele.getBoundingClientRect()

    // 當元素的top偏移量小於頁面大小並且大於高度的負數

    if(position.top<windowHeight && position.top>-position.height){

        return true

    }

    return false

}

​

• 對圖片實現懶加載

​
/**

* 對圖片進行懶加載

*/

function lazyLoad(img, src){

    if(img && src && isVisible(img)){ // 元素存在，元素未被加載，元素可見

        setTimeout(function(){

            img.setAttribute('src', src)

        }, 1000) // 模擬網絡請求

    }

}

​

• 添加滾動監聽

// 窗口滾動

window.addEventListener('scroll', function(){

    lazyLoad(img, src)

})

Vue插件實現代碼

/**

* 判斷元素可見

*/

function isVisible(el){

    let windowHeight = window.innerHeight

    let position = el.getBoundingClientRect()

    // 當元素的top偏移量小於頁面大小並且大於高度的負數

    if(position.top<windowHeight && position.top>-position.height){

        return true

    }

    return false

}



/**

* 對圖片進行懶加載

*/

function lazyLoad(img, src){

    if(img && src && isVisible(img)){ // 元素存在，元素未被加載，元素可見

        setTimeout(function(){

            img.setAttribute('src', src)

        }, 1000) // 模擬網絡請求慢的情況

    }

}



export default {

    install(Vue, options){

        Vue.directive('lazy', {

            bind: function(el, binding, vnode){

                el.setAttribute('src', options.loading)

                window.addEventListener('scroll', function(){

                    lazyLoad(el, binding.value)

                })

            },

            inserted: function(el, binding, vnode){

                lazyLoad(el)

            }

        })

    }

}

• main.js

Vue.use(myPlugin, {loading: defaultImg})