应用场景
某些网站中拥有大量图片，但用户可视区范围内，只展示一小部分的图片，如果不对图片进行懒加载，在网速较慢或图片资源过大的情况下，会出现加载缓慢卡顿的现象，影响用户体验。针对这种情况提出先加载用户可视范围内的图片，其他图片等用户进行操作（滑动或点击按钮）时再进行加载。
实现原理
1、图片列表
先不对图片标签赋值图片的地址，将地址放到父级里面利用data-source保存。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div id="imgWrapper">
<ul id="imgList">
{taskImg.map((item, index) =>(
<li key={`img${index}`}
lazyload="true"
data-original={download() + item.imageId}>
<Image
width={150}
height={150}
src=""/>
</li>
))}
</ul>
</div>
|
2、页面滑动
横向滚动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| // 获取未显示的图片列表
const imgList = document.getElementById("imgList").querySelectorAll("li[data-original][lazyload]");
// 获取主容器左边距离和右边距离
const wrapper = document.getElementById("imgWrapper");
const initRect = wrapper.getBoundingClientRect();
const initLeft = initRect.left;
const initRight = initRect.right;
imgList.forEach((item, index) =>
{
const img = item.firstChild.firstChild;//获取图片元素
const rect = item.getBoundingClientRect();
let rectL = rect.left + rect.width;// 图片到可视区域左边距离
let rectR = rect.right - rect.width;// 图片到可视区域右边距离
// 判断是否在可视区域内
if ((rect.left >= initLeft && rectR <= initRight) || (rectL >= initLeft && rect.right <= initRight))
{
img.src = item.dataset.original;
item.removeAttribute("data-original");// 移除属性，下次不再遍历
item.removeAttribute("lazyload");
}
});
|
竖向滚动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| // 获取未显示的图片列表
const imgList = document.getElementById("imgList").querySelectorAll("li[data-original][lazyload]");
imgList.forEach((item, index) =>
{
const img = item.firstChild.firstChild;//获取图片元素
// 判断是否在可视区域内
if (img.offsetTop < window.innerHeight + window.pageYOffset)
{
img.src = item.dataset.original;
item.removeAttribute("data-original");// 移除属性，下次不再遍历
item.removeAttribute("lazyload");
}
});
|
