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