給你一個圖片懶加載（lazyload）

給你一個圖片懶加載（lazyload）

廢話就很少說了，直接上教程吧

• 看了許多篇的教程，基本都是獲取img標籤，而後判斷他是否在可視範圍以內。而後全局定義個值，紀錄懶加載所進行到的位置,這裏我介紹的有點不同

將須要作懶加載的元素佔一下位，這裏爲何我是用一個類名是來獲取元素下面會有介紹

<img class="J_lazyload" data-src="{{路徑}}" />
<!-- 這裏是給背景作懶加載 -->
<div class="J_lazyload" data-src="{{路徑}}"></div>
複製代碼

定義一個lazyload的構造函數，而且定義一個獲取對應的節點位置的方法

function LazyLoad() {
    this.getPositions()
    this.initData()
}
LazyLoad.prototype.getPositions = function () {
    //這裏須要使用獲取靜態節點列表，不能獲取動態節點列表，由於須要移除J_lazyload鉤子
    let imgs = document.querySelectorAll('.J_lazyload')
    let targetHeight = window.innerHeight
    for (let i = 0, ii = imgs.length; i < ii; i++) {
        let items = imgs[i]
        let handle = ((img)=>{
            return function(){
                if (img.tagName.toLowerCase() === 'img') {
                    img.src = img.dataset.src;
                } else {
                    img.style['background-image'] = 'url(' + img.dataset.src + ')';
                }
            }
        })(items)
        let pos = items.getBoundingClientRect()
        // 這裏是判斷是否在屏幕內
        if (pos.top < targetHeight && pos.bottom > 0) {
            // 這裏是使用的Image，下載完成後再將對應的dom節點的src
            let image = new Image()
            image.src = items.dataset.src
            image.onload = handle
            // 移除J_lazyload鉤子，防止重複進行懶加載
            items.classList.remove('J_lazyload')
        }
    }
}
複製代碼

綁定事件以前 = >，先來講一下防抖,因爲頻繁觸發，因此這裏須要引入防抖函數

function debounce(fn, time) {
    var timer = null;
    time = time || 60;
    var _arguments;
    return function () {
        var self = this
        clearTimeout(timer)
        _arguments = [...arguments];
        timer = setTimeout(() => {
            fn.apply(self, _arguments)
            timer = null
        }, time)
    }
}
複製代碼

綁定window的滾動事件，

LazyLoad.prototype.initData = function () {
    let scrolls = debounce(this.replaceUrl, 1000).bind(this)
    window.addEventListener('scroll', scrolls)
}

// 進行懶加載
LazyLoad.prototype.replaceUrl = function () {
    this.getPositions()
}
複製代碼

以上就是實現一個基本的懶加載了。以爲不錯的話，能夠點個贊呀