图片脚本懒加载简易版插件 LazyLoad
来源:互联网 发布:depthmap软件原理 编辑:程序博客网 时间:2024/05/29 10:37
工作中需求中经常会用到图片懒加载的功能,这种功能实现起来并不难,但一次性写下来代码量也不会小。
网上类似的插件倒是一大堆,但是功能完善逻辑严谨的体积太大,里面包含了大量根本用不到的功能和代码,凭空增加文件体积;至于体积小的,又总怀疑逻辑写得清不清楚,会不会有什么bug之类的,所以比较纠结。
索性有时间就自己写了一个,下次再用到这个功能的时候,就不会再嫌弃这个嫌弃那个了,并且代码是自己写的,就算有什么bug,自己也知道该怎么改,也能够很轻松地根据实际需求增删代码,避免陷入逻辑严谨但代码臃肿或者代码精简但逻辑不严谨的怀疑之中。
简单介绍
代码使用 ES6
语法,这个插件其实是一个 class
,babel
打包后可兼容到 IE9
完全没问题的,甚至更低或许也可以,没试过,原生js
无任何依赖,兼容移动端与 pc
端。
核心代码其实就几行而已:
if ((rect.top > 0 && this.H + distance >= rect.top) || (rect.top < 0 && (rect.top + rect.height >= -this.distance))) { if ((rect.left > 0 && this.W + distance >= rect.left) || (rect.left < 0 && (rect.left + rect.width >= -this.distance))) { this.loadItem(ele) this.elements.splice(i, 1, null) }}
上述代码就是判断元素有没有出现在浏览器视窗内,以决定是否让元素加载对应的图片,并且将在图片懒加载的同时,将元素从尚未懒加载的DOM
集合中去掉,优化性能
用法
只需要对这个类LazyLoad
进行初始化即可:
let lazyload = new LazyLoad()lazyload.init({elements: domObjList})
为了更方便的传参,lazyLoad
类的 init
方法接受 1
个 Object
类型的参数,此参数最多有 6
个自有属性,一个必选,五个可选。
elements
NodeElement
懒加载的元素DOM
对象,例如使用 document.querySelector('.img')获取的结果就是此类型
之所以没有兼容直接传递一个类名或者
id
让插件自己获取DOM
对象,而是让使用者自己传入,这是一种权衡之后的结果,因为我觉得这个插件主要的功能就是懒加载,如果因为多加了一个可有可无的选择器功能而让插件变得臃肿,反而不美 - 是 distance
number
当元素距离浏览器可视区域边缘多远时进行图片的加载动作,距离单位是px
0
否 tag
string
元素标签上用于懒加载的属性名,值为需要懒加载的图片地址 data-src
否 frequency
number
插件通过监听页面的scroll
、resize
和touchmove
事件来不断获取元素的是否进入视野内的信息,此参数用于事件节流,此值越小,则占用的浏览器资源越多 14
否 isBg
boolean
插件支持直接的 img
标签懒加载,同时也可支持其他元素的背景图片懒加载,默认是支持 img
标签的图片懒加载 false
否 defaultImg
string
在元素懒加载正确的图片之前显示的替代图片,默认没有 - 否如果你想懒加载的图片是一个 div
的背景图,并且将图片地址附在 imgurl
这个自定义属性上,还规定当元素距离视野边缘 50px
时就开始进行懒加载,节流频率为 20ms
, 懒加载的替代图片是 https://dummyimage.com/200x200/ff0ff0&text=66
,例如:
<div class="bgBox" imgurl="http://exmple.com/1.png"></div>
则需要这样初始化:
let lazyload = new LazyLoad()lazyload.init({elements: document.querySelectorAll('.bgBox'), distance: 50, tag: 'imgurl', frequency: 20, isBg: true, defaultImg: 'https://dummyimage.com/200x200/ff0ff0&text=66'})
另外,需要注意的是,如果你再初始化并调用 init
方法之后,页面又追加了需要懒加载的元素,则需要再次调用 init
方法,并将你新追加进来的元素DOM
对象传入 elements
属性,来将懒加载应用于新追加进来的元素上。
也就是类似于这种:
lazyload.init({elements: newDOMObj})
算上空行和注释也就100行左右的代码量,整个插件就是一个 ES6
的 class
类定义的,所以逻辑看起来是很清晰的,没有什么道道,看一遍就知道是怎么回事,可以很轻松地进行修改。
此小插件已经放到 Github 上,别忘了 star
哦~
- 图片脚本懒加载简易版插件 LazyLoad
- lazyload 图片加载插件 整理
- 懒加载之jQuery图片延迟加载插件jQuery.lazyload
- 基于jquery的图片懒加载:LazyLoad插件参数详解
- 基于jquery的图片懒加载:LazyLoad插件参数详解
- 图片懒加载插件lazyload的使用示例
- 一看就明白的图片懒加载插件lazyload
- jQuery lazyload 懒加载插件
- jquery.lazyload 插件实现图片延迟加载
- 启用lazyload插件,减少图片加载
- jQuery lazyload插件实现图片延时加载
- jQuery图片延迟加载插件jQuery.lazyload
- jQuery图片延迟加载插件jQuery.lazyload
- jQuery图片延迟加载插件jQuery.lazyload
- jQuery图片延迟加载插件jQuery.lazyload
- jQuery图片延迟加载插件jQuery.lazyload
- jQuery图片延迟加载插件jQuery.lazyload
- jQuery图片延迟加载插件jQuery.lazyload
- Linux 下 rz/sz命令安装及使用
- Alibaba编码规约遵从
- ubuntu 下关闭触摸板
- 【enum】如何在枚举中定义自定义的方法,并进行使用
- 写一个函数返回参数二进制中 1 的个数 比如: 15 0000 1111 4 个 1 程序原型: int count_one_bits(unsigned int value) { //
- 图片脚本懒加载简易版插件 LazyLoad
- 使用VMWare安装Ubuntu系统简介
- 有关于开发板ZC0301 Webcam摄像头驱动
- Python之基础知识(1. 变量输入输出)
- 学不可以已
- jvm tuning
- 查看命令之ls cd pwd
- 获取一个数二进制序列中所有的偶数位和奇数位,分别输出二进制序列。
- u-boot启动代码之start_armboot分析(原创)