黑马程序员技术交流社区

标题: 懒加载的加载 [打印本页]
作者: wx1029067459    时间: 2019-6-11 18:29
标题: 懒加载的加载
什么是懒加载
懒加载是一种 网页优化技术
作用图片作为一种网页资源，请求时同样将占用网络资源，导致网页首屏的加载时间被拉长。
如果一次性将网页的所有图片资源加载，会同时间出现大量的图片请求。而懒加载，则是将图片的加载，从原先的一口气加载变成按需加载的模式，减少同时间发起的资源请求，加快页面打开的速度，优化用户体验。
原理通过JavaScript脚本，使图片仅在当前可视区域的视窗内出现时才加载该图片。达到减少首屏首次请求图片资源的次数的技术就称为图片懒加载
思路
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) && this.loadImage(this.imglist, 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) && _this.loadImage(_this.imglist, 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();



作者: 老黑    时间: 2019-6-11 19:48
哇塞，小哥哥的总结可真到位
作者: 周文广    时间: 2019-6-11 20:12
大神的总结真好，加个微信可好
作者: 周文广    时间: 2019-6-11 20:13
哇塞，黑马的大神吗？哪一期的压
作者: 蒋晨    时间: 2019-6-11 20:50
顽强的毅力，可以征服世界上任何一座高峰
作者: 我的那位    时间: 2019-6-12 08:39
心有多大，舞台就有多大
作者: 98691258@qq.com    时间: 2019-6-12 09:00
不忘初心，方得始终
作者: zhangjiaqi2333    时间: 2019-6-12 15:01
在这个世界上，总有人需要你，就像你永远需要别人一样
作者: ffghf    时间: 2019-6-12 15:17
年轻人，去闯，去努力，去奋斗，去做自己最想做的事情。只要不做坏事，只要保持良心，剩下的什么事情都能做。
作者: 夜听雨    时间: 2019-6-13 15:22
“有人说...学习是为了完善人生，而非享乐人生，追求卓越，成功就会在不经意间追上你……”
作者: 夜听雨    时间: 2019-6-13 19:42
选择了，便走下去。
作者: 18322960295    时间: 2019-6-15 12:55
你想去的地方，只要努力与付出，你都可以
作者: 造梦师    时间: 2019-6-15 15:26

心有多大，舞台就有多大
作者: 柠檬leung不酸    时间: 2019-6-20 16:17
Between Heaven and Earth, every single step of ours is at full throttle, while every single road is twisting and turning. There is no constant view……我们奔走于天地间，每一次跋涉都全力以赴，而每一条道路都是曲折回环。路上没有不变的风景，没有笔直的坦途
作者: 柠檬leung不酸    时间: 2019-6-24 12:07
如果不坚持，到哪里都是放弃。如果这一刻不坚持，不管再到哪里，身后总有一步可退，可退一步不会海阔天空，只是躲进自己的世界而已，而那个世界也只会越来越小。
作者: 夜听雨    时间: 2019-6-27 18:52
只要朝着一个方向努力，一切都会变得得心应手。加油
作者: 夜听雨    时间: 2019-7-2 14:04
不忘初心，坚持
作者: 柠檬leung不酸    时间: 2019-7-18 12:48
预测未来最好的方法就是去创造未来。
作者: 卡哇伊伊    时间: 2019-7-30 13:20
选择了，便走下去。
作者: 柠檬leung不酸    时间: 2019-8-8 09:44
不忘初心，坚持



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2