图片懒加载


1. 概念

图片懒加载就是延迟加载,使得网络压力、渲染压力减轻。
先将图片链接放在自定义属性,使得img标签不对属性触发行为。
再利用监听方法,判断图片是否到达可视区域,将图片链接放到src上,触发标签网络行为。
最后取消监听。

2. 方法

2.1 scroll事件监听

使用document.queryselct(“asda”)获取节点
节点.BoundingClienReact(“xxx”).top()获取高度
…获取显示区域的高度
使用window.listener(“scroll”)监听滚动事件
滚动时判断节点高度小于显示高度
将data-scr 赋值给src
所有img加载完,将scroll监听取消

2.2 构造函数监听器

使用浏览器构造函数监视器(如果支持的话)
提前设置好处理的回调函数
将回调函数作为参数给构造函数,new出实例

对每一个img标签调用实例来监听

在回调函数里判断是否在交叉区域
在,将data-scr 赋值给src,取消这个节点的监听

还有判断是否还有监听没有监听了,释放实例null


文章作者: iamfugui
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 iamfugui !
评论
  目录