‘我’很"懒" ----- 实现图片懒加载

什么是懒加载

懒加载是一种 网页优化技术

作用

图片作为一种网页资源，请求时同样将占用网络资源，导致网页首屏的加载时间被拉长。

如果一次性将网页的所有图片资源加载，会同时间出现大量的图片请求。而懒加载，则是将图片的加载，从原先的一口气加载变成按需加载的模式，减少同时间发起的资源请求，加快页面打开的速度，优化用户体验。

原理

通过JavaScript脚本，使图片仅在当前可视区域的视窗内出现时才加载该图片。达到减少首屏首次请求图片资源的次数的技术就称为图片懒加载

https://lanhai1.github.io/archives/ 👈 个人博客

思路

• 首先获取图片元素 保存在一个数组中 方便后面渲染至页面

---

• 封装函数 => 判断该图片是否可以进行加载

---

• 封装函数 => 获取图片与窗口的信息
• 相比较 window的可视高度 是否 大于等于 图片相对于视窗的top值
• 返回比较值

---

• 封装函数 => 加载图片 参数1:元素 参数2:数组索引值
• 获取自定义属性(元素存放src的属性)
• 元素赋值正确的src
• 从数组中删除已经渲染了的图片

---

• 封装函数 => 滚动事件
• 为浏览器注册滚动时间 监测是否继续懒加载

---

• 封装函数 => 初始化
• 调用 是否加载图片函数
• 调用 滚动事件函数

---

typescript代码

// 图片懒加载类
class LazyLoads {
    imglist: Array<Element>;
    // 构造器
    constructor(public el: string) {
        // 获取图片元素 追加至数组
        this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
    }
    // 判断该图片是否可以加载
    canILoad = () => {
        // 循环遍历数组
        for (let i = this.imglist.length; i--;) {
            this.getBound(this.imglist[i]) && this.loadImage(this.imglist[i], i);
        }
    }
    // 获取图片与窗口的信息
    getBound = (el: Element): boolean => {
        // 获取元素相对于视窗的位置
        let bound = el.getBoundingClientRect();
        // 获取window可视高度
        let clientHeight = window.innerHeight;
        // 判断是否需要加载数据
        return (bound.top <= clientHeight);
    }
    // 加载图片
    loadImage = (el, index: number) => {
        // 获取自定义属性
        let src = el.getAttribute('data-lanhai');
        // 赋值
        el.src = src;
        // 删除已经渲染了的图片
        this.imglist.splice(index, 1);
    }
    getScroll = () => {
        // 为浏览器注册滚动时间 监测是否继续懒加载
        window.addEventListener('scroll', () => {
            this.imglist.length && this.canILoad();
        });
    }
    // 初始化
    init = () => {
        this.canILoad();
        this.getScroll();
    }
}
// 实例化对象，参数则是需要使用懒加载的图片
let start = new LazyLoads('img')
// 初始化
start.init()

编译后 JavaScript代码

// 图片懒加载类
var LazyLoads = /** @class */ (function () {
    // 构造器
    function LazyLoads(el) {
        var _this = this;
        this.el = el;
        // 判断是否该图片是否可以加载
        this.canILoad = function () {
            // 循环遍历数组
            for (var i = _this.imglist.length; i--;) {
                _this.getBound(_this.imglist[i]) && _this.loadImage(_this.imglist[i], i);
            }
        };
        // 获取图片与窗口的信息
        this.getBound = function (el) {
            // 获取元素相对于视窗的位置
            var bound = el.getBoundingClientRect();
            // 获取window可视高度
            var clientHeight = window.innerHeight;
            // 判断是否需要加载数据
            return (bound.top <= clientHeight);
        };
        // 加载图片
        this.loadImage = function (el, index) {
            // 获取自定义属性
            var src = el.getAttribute('data-lanhai');
            // 赋值
            el.src = src;
            // 删除已经渲染了的图片
            _this.imglist.splice(index, 1);
        };
        this.getScroll = function () {
            // 为浏览器注册滚动时间 监测是否继续懒加载
            window.addEventListener('scroll', function () {
                _this.imglist.length && _this.canILoad();
            });
        };
        // 初始化
        this.init = function () {
            _this.canILoad();
            _this.getScroll();
        };
        // 获取图片元素 追加至数组
        this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
    }
    return LazyLoads;
}());
// 实例化对象，参数则是需要使用懒加载的图片
var start = new LazyLoads('img');
// 初始化
start.init();