给你一个图片懒加载（lazyload）

最新推荐文章于 2024-01-29 15:21:58 发布

weixin_34032779

最新推荐文章于 2024-01-29 15:21:58 发布

阅读量74

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b9f2576f265da0add51b112

本文介绍了一种实现懒加载的方法，通过定义构造函数和获取节点位置的方法来实现。使用懒加载可以提高网页加载速度，减少服务器压力。文章还介绍了如何通过防抖函数减少事件绑定的频率。

给你一个图片懒加载（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()
}
复制代码