简易版-图片懒加载-原生js

原理：将需要懒加载的图片src设置为loading图片，然后将data-src设置为图片原路径。待页面滚动到合适距离之后，就加载相应的图片

一、使用方法

1、设置使用懒加载图片

<img src="loading图片路径" data-src="原图片路径" class="lazy-load-image" alt="">

2、引入js文件

注：在文件末尾处引入

// 节流函数  优化性
function thorttleFn(fn, time) {
    let preTime = Date.now()
    return function () {
        let that = this
        let nowTime = Date.now()
        if (nowTime - preTime > time) {
            fn.apply(that, arguments)
            preTime = nowTime
        }
    }
}
// 通过setSrcFn函数来判断哪些图片需要加载
function setSrcFn() {
    // 获取所有的需要进行懒加载的图片
    let imgArr = Array.from(document.querySelectorAll('.lazy-load-image'))
    // 如果当前图片已全部加载完毕，就去除监听事件
    if (imgArr.length == 0) {
        window.removeEventListener('scroll', scrollFn);
    }
    // 获取当前屏幕高度
    let winHeight = window.innerHeight
    // 遍历当前还需要懒加载的图片
    imgArr.forEach((item, idx) => {
        if (item.offsetTop < (winHeight + document.documentElement.scrollTop)) {
            //屏幕位置到相应位置时就进行加载
            item.classList.remove('lazy-load-image')
            item.src = item.dataset.src
        }
    })
}
// scrollFn 是节流后的滚动事件
let scrollFn = thorttleFn(setSrcFn, 100)
// 页面初始化时执行一次，
setSrcFn()
window.addEventListener('scroll', scrollFn)