实现懒加载
原文合集地址如下，有需要的朋友可以关注
[本文地址](https://mp.weixin.qq.com/s?__biz=MzI5MjY4OTQ2Nw==&mid=2247484202&idx=1&sn=24ab0996dd892dce23706bfec90486f3&chksm=ec7cc07edb0b4968967ac62a5478eb1544b274dff1d195178dbc7dfa2d6dfc5f0506c354a111#rd)
[合集地址](https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzI5MjY4OTQ2Nw==&action=getalbum&album_id=2968599106275246086&scene=173&from_msgid=2247484202&from_itemidx=1&count=3&nolastread=1#wechat_redirect)
# 什么是懒加载
只在数据或内容即将进入视口或即将需要的时候才加载。 实现懒加载的好处有:
1. 提高页面加载速度和响应速度。只加载当前用户需要或将要浏览到的数据,避免一次性加载大量不必要的数据。
1. 节省用户流量。只加载用户浏览到的数据,避免加载用户未浏览的数据,特别是对于移动端用户来说可以节省流量。
1. 优化用户体验。避免一次性加载大量数据导致页面卡顿,appear突然出现,样式渲染跳跃等影响用户体验的问题。 实现懒加载的弊端有:
1. 首屏加载会较慢,而一些关键数据又需要首屏加载,需要权衡。
1. 需要监听浏览器事件并判断元素是否进入视口,稍微增加了开发难度。
1. 如果数据较多,需要加载的内容较长,用户体验还是会受到影响。懒加载并非银弹,还需要结合其他优化手段。
1. 不利于 SEO。搜索引擎爬虫抓取不到实际内容,抓取到的可能是 loading 占位图等,影响网页Indexed和排名。 所以,懒加载是一种非常 useful 的技术,可以极大提高用户体验和网页性能,但也有一定的弊端,需要权衡选择。一般来说,对于加载的数据较多,页面性能和流量较为关注的场景,懒加载是一个不错的方案。但如果对 SEO 优化要求较高,或者加载的数据较少,也可以不使用懒加载。
## 实现图片懒加载
页面需要大量展示图片时可以考虑使用懒加载。实现步骤如下：
1. 为图片添加默认的 loading 图片源和真实的 src 属性:
```
<img src="loading.gif" src="real-img.jpg" />
```
2. 获取所有图片元素:
```
const images = document.querySelectorAll('img');
```
3. 监听页面滚动事件:
```
window.addEventListener('scroll', loadImages);
```
4. 定义 loadImages 函数来加载图片:
```
function loadImages() {
for (let i = 0; i < images.length; i++) {
// 获取图片源和位置信息
let imgSrc = images[i].dataset.src;
let imgRect = images[i].getBoundingClientRect();
if (imgRect.top < window.innerHeight && imgRect.left < window.innerWidth
&& imgRect.right > 0 && imgRect.bottom > 0) {
// 图片进入视口,加载真实图片源
images[i].src = imgSrc;
images[i].addEventListener('load', () => {
images[i].style.opacity = 1; // 淡入效果
});
}
}
}
```
5. 页面初始化时调用一次 loadImages,防止某些图片已进入视口但未加载:
```
loadImages();
```
6. 为避免加载较大图片导致页面卡顿,可以考虑在图片加载完成后设置淡入效果:
```
images[i].addEventListener('load', () => {
images[i].style.opacity = 1;
});
```
## 列表懒加载
这里提供一个核心代码，根据自己项目加入即可
```
// 比如使用我有这样一个
// 定义页码和加载条数
const pageSize = 10;
let currentPage = 1;
// list 代表拥有滚动条的元素, 看你代码如何定义，可以是网页窗口 window、div元素、ul列表等等
// 需要先获取list 元素，再监听列表中的元素进入视口事件,判断元素位置并加载数据
list.addEventListener('scroll', () => {
Array.from(list.children).forEach(elem => {
let top = elem.offsetTop;
let height = elem.clientHeight;
if (top > 0 && top < window.innerHeight) {
// 元素进入视口,加载数据
fetchData(currentPage);
currentPage++;
}
});
});
定义 fetchData() 方法根据页码加载数据,并更新元素内容:
function fetchData(page) {
// 发起请求,加载第page页的数据，此处省略调用接口的代码，根据自己代码结构加入即可
...
...
// 更新列表中符合页码的元素内容
Array.from(list.children).forEach(elem => {
if (elem.dataset.page === page) {
elem.innerHTML = ... // 加载的数据内容
}
});
}
// 初始化加载第一页数据,并为每个列表元素添加 data-page 属性:
fetchData(1);
Array.from(list.children).forEach((elem, index) => {
elem.dataset.page = index % 10 + 1; // 每10个元素为一页
});
```
## 列表滚动加载
如果是加载列表数据的话，这里提供一个实现滚动加载列表数据的代码
```
// 1. 定义页面大小、每页加载条数和当前页码:
const pageSize = 10; // 每页10条数据
const listHeight = 400; // 比如列表容器高度400px
let currentPage = 1; // 当前页码
let scrollTop = 0; // 上一次滚动条位置
// 2. 绑定滚动事件,判断滚动方向并加载数据:
list.addEventListener('scroll', () => {
let scrollHeight = list.scrollHeight; // 滚动内容高度
let clientHeight = list.clientHeight; // 视口高度
let scrollDirection = scrollTop - list.scrollTop;
// 向下滚动
if (scrollDirection > 0 && scrollHeight - clientHeight - list.scrollTop <= pageSize * 3) {
// 滚动到底部,加载下一页
currentPage++;
fetchData(currentPage);
}
// 向上滚动
if (scrollDirection < 0 && list.scrollTop <= pageSize * 3) {
// 滚动到顶部,加载上一页
currentPage--;
fetchData(currentPage);
}
scrollTop = list.scrollTop; // 更新滚动条位置
});
// 定义 fetchData() 方法,根据页码加载数据:
function fetchData(page) {
// 发起请求,加载第page页的数据
...
// 将新加载的数据添加到列表尾部
list.append(...);
}
// 初始化获取第一页数据
fetchData(1)
```
