什么是懒加载懒加载是一种 网页优化技术
作用图片作为一种网页资源，请求时同样将占用网络资源，导致网页首屏的加载时间被拉长。
如果一次性将网页的所有图片资源加载，会同时间出现大量的图片请求。而懒加载，则是将图片的加载，从原先的一口气加载变成按需加载的模式，减少同时间发起的资源请求，加快页面打开的速度，优化用户体验。
原理通过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();
|
|
收藏
淘帖
踩
