A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© wx1029067459 初级黑马   /  2019-6-11 18:29  /  2392 人查看  /  19 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

什么是懒加载
懒加载是一种 网页优化技术
作用图片作为一种网页资源,请求时同样将占用网络资源,导致网页首屏的加载时间被拉长
如果一次性将网页的所有图片资源加载,会同时间出现大量的图片请求。而懒加载,则是将图片的加载,从原先的一口气加载变成按需加载的模式,减少同时间发起的资源请求,加快页面打开的速度,优化用户体验。
原理通过JavaScript脚本,使图片仅在当前可视区域的视窗内出现时才加载该图片。达到减少首屏首次请求图片资源的次数的技术就称为图片懒加载
思路
  • 首先获取图片元素 保存在一个数组中 方便后面渲染至页面

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

  • 封装函数 => 获取图片与窗口的信息
  • 相比较 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) && 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();



19 个回复

倒序浏览
哇塞,小哥哥的总结可真到位
回复 使用道具 举报
大神的总结真好,加个微信可好
回复 使用道具 举报
哇塞,黑马的大神吗?哪一期的压
回复 使用道具 举报
顽强的毅力,可以征服世界上任何一座高峰
回复 使用道具 举报
心有多大,舞台就有多大
回复 使用道具 举报
不忘初心,方得始终
回复 使用道具 举报
在这个世界上,总有人需要你,就像你永远需要别人一样
回复 使用道具 举报
ffghf 初级黑马 2019-6-12 15:17:39
9#
年轻人,去闯,去努力,去奋斗,去做自己最想做的事情。只要不做坏事,只要保持良心,剩下的什么事情都能做。
回复 使用道具 举报
“有人说...学习是为了完善人生,而非享乐人生,追求卓越,成功就会在不经意间追上你……”
回复 使用道具 举报
选择了,便走下去。
回复 使用道具 举报
你想去的地方,只要努力与付出,你都可以
回复 使用道具 举报

心有多大,舞台就有多大
回复 使用道具 举报
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……我们奔走于天地间,每一次跋涉都全力以赴,而每一条道路都是曲折回环。路上没有不变的风景,没有笔直的坦途
回复 使用道具 举报
如果不坚持,到哪里都是放弃。如果这一刻不坚持,不管再到哪里,身后总有一步可退,可退一步不会海阔天空,只是躲进自己的世界而已,而那个世界也只会越来越小。
回复 使用道具 举报
只要朝着一个方向努力,一切都会变得得心应手。加油
回复 使用道具 举报
不忘初心,坚持
回复 使用道具 举报
预测未来最好的方法就是去创造未来。
回复 使用道具 举报
选择了,便走下去。
回复 使用道具 举报
不忘初心,坚持
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马