实现图片懒加载
时间:2022-04-29
本文章向大家介绍实现图片懒加载,主要内容包括1. HTML 约定、2. JavaScript 实现、太简单了?、如此简单,不妨扩展一下、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src
(也可以约定为其他属性名)属性的值,并赋予img
的src,从而实现动态加载图片的机制。
这里需要注意的是: img在初始化的时候不要设置src属性,因为即使设置 src=''
浏览器也会尝试加载图片。
一个简单的图片懒加载共涉及两个方面,
1. HTML 约定
我们首先需要给准备实施懒加载的img
元素添加指定的class
这里为m-lazyload
,同时将img src赋值给 data-src属性。
具体示例为:
- <img class="m-lazyload" data-src="imgUrl">
2. JavaScript 实现
动态加载总共分为以下几个步骤,这里每个步骤都将被拆分为独立的函数
1. 添加页面滚动监听事件
- window.addEventListener('scroll', _delay, false);
- function _delay() {
- clearTimeout(delay);
- delay = setTimeout(function () {
- _loadImage();
- }, time);
- }
2. 当触发监听事件时会执行 _loadImage
函数,该函数负责加载图片
- function _loadImage() {
- for (var i = imgList.length; i--;) {
- var el = imgList[i];
- if (_isShow(el)) {
- el.src = el.getAttribute('data-src');
- el.className = el.className.replace(new RegExp("(\s|^)" + _selector.substring(1, _selector.length) + "(\s|$)"), " ");
- imgList.splice(i, 1);
- }
- }
- }
虽然执行了_loadImage
函数,但是我们得知道哪些图片需要被加载,这里的判断依据是什么呢?
依据就是判断该图片是否在当前窗口的可视区域内,在这里我们封装一个_isShow
函数来实现
- function _isShow(el) {
- var coords = el.getBoundingClientRect();
- return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
- }
自此一个图片加载的闭环就形成了
当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在,则动态将data-src
的值赋予该图片。
太简单了?
事实就是如此!!!
如此简单,不妨扩展一下
- 添加一些自定义参数,谁都喜欢自定义,不是吗?
- 支持
iScroll
, iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。
这里我们做了些优化
- 图片加载后移除选择器,避免重复判断。
- 缓存img元素结合,减少dom元素查询性能损耗
- 扩展
prototype
添加getNode
方法,支持分页数据懒加载(由于我们之前缓存了dom元素)
OK!说了这么多,show me the code 吧!
- (function () {
- var imgList = [], // 页面所有img元素集合
- delay, // setTimeout 对象
- offset, //偏移量,用于指定图片距离可视区域多少距离,进行加载
- time, // 延迟载入时间
- _selector; // 选择器 默认为 .m-lazyload
- function _isShow(el) {
- var coords = el.getBoundingClientRect();
- return ( (coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
- }
- function _loadImage() {
- for (var i = imgList.length; i--;) {
- var el = imgList[i];
- if (_isShow(el)) {
- el.src = el.getAttribute('data-src');
- el.className = el.className.replace(new RegExp("(\s|^)" + _selector.substring(1, _selector.length) + "(\s|$)"), " ");
- imgList.splice(i, 1);
- }
- }
- }
- function _delay() {
- clearTimeout(delay);
- delay = setTimeout(function () {
- _loadImage();
- }, time);
- }
- function ImageLazyload(selector, options) {
- var defaults = options || {};
- offset = defaults.offset || 0;
- time = defaults.time || 250;
- _selector = selector || '.m-lazyload';
- this.getNode();
- _delay();//避免首次加载未触发touch事件,主动触发一次加载函数
- if (defaults.iScroll) {
- defaults.iScroll.on('scroll', _delay);
- defaults.iScroll.on('scrollEnd', _delay);
- } else {
- window.addEventListener('scroll', _delay, false);
- }
- }
- ImageLazyload.prototype.getNode = function () {
- imgList = [];
- var nodes = document.querySelectorAll(_selector);
- for (var i = 0, l = nodes.length; i < l; i++) {
- imgList.push(nodes[i]);
- }
- };
- })();
来源: 实现一个图片懒加载插件有多难? – 前端有多难? – SegmentFault
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法