‘我’才"懒"得加载呢 —– 实现图片懒加载

什么是懒加载

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

作用

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

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

原理

通过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();