什么是懒加载

只在数据或内容即将进入视口或即将需要的时候才加载。
实现懒加载的好处有:

提高页面加载速度和响应速度。只加载当前用户需要或将要浏览到的数据,避免一次性加载大量不必要的数据。
节省用户流量。只加载用户浏览到的数据,避免加载用户未浏览的数据,特别是对于移动端用户来说可以节省流量。
优化用户体验。避免一次性加载大量数据导致页面卡顿,appear突然出现,样式渲染跳跃等影响用户体验的问题。
实现懒加载的弊端有:
首屏加载会较慢,而一些关键数据又需要首屏加载,需要权衡。
需要监听浏览器事件并判断元素是否进入视口,稍微增加了开发难度。
如果数据较多,需要加载的内容较长,用户体验还是会受到影响。懒加载并非银弹,还需要结合其他优化手段。
不利于 SEO。搜索引擎爬虫抓取不到实际内容,抓取到的可能是 loading 占位图等,影响网页Indexed和排名。
所以,懒加载是一种非常 useful 的技术,可以极大提高用户体验和网页性能,但也有一定的弊端,需要权衡选择。一般来说,对于加载的数据较多,页面性能和流量较为关注的场景,懒加载是一个不错的方案。但如果对 SEO 优化要求较高,或者加载的数据较少,也可以不使用懒加载。

实现图片懒加载

页面需要大量展示图片时可以考虑使用懒加载。实现步骤如下：

为图片添加默认的 loading 图片源和真实的 data-src 属性:

<img src="loading.gif" data-src="real-img.jpg" />

获取所有图片元素:

const images = document.querySelectorAll('img');

监听页面滚动事件:

window.addEventListener('scroll', loadImages);

定义 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;  // 淡入效果});} }
}

页面初始化时调用一次 loadImages,防止某些图片已进入视口但未加载:

loadImages();

为避免加载较大图片导致页面卡顿,可以考虑在图片加载完成后设置淡入效果:

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)

什么是懒加载，如何实现图片或列表懒加载？相关推荐

layui tree 加载慢_图片太多，加载慢，我用了layui里的方式，放在服务器后还是太慢！怎么解决？？？有没有什么优化的技巧？？？...
怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决怎么解决??????? layui.use(['layer','flow ...
Android 上千张图片的列表滑动加载
一般项目中图片加载用的比较多的是ImageLoader 但是需求自己配置一些参数上手有些复杂对于手机图库中有上千张图片需要加载时一个使用性能很好的库Glide可以解决效果图如下滑动非常流畅 ...
img实现图片加载前默认图片，加载时替换真实图片，加载失败时替换加载失败图片
文章目录前言一.加载前二.加载成功三.加载失败总结前言开发过程中,我们希望图片在加载失败的时候会替换成加载失败的图片,同时为了更好的体验,加载前最好也要有一张占位图片,即实现加载前显示一 ...
Glide加载不出图片
Glide加载不出图片使用Glide之后加载不出图片,需要在你的AndroidManifest.xml中添加网络权限添加完图片如果还是显示不出来还需要在 AndroidManifest.xml里面 ...
使用Glide加载、缓存图片、Gif、解决背景出现浅绿色、GlideModules冲突
之前一直使用Volley ImageLoader.或者Picasso,无意间发现Glide,觉得真的是棒棒的. 1.和其他的一样在Module的build.gradle中添加依赖 compile 'c ...
使用SDWebImage加载多个图片内存崩溃的问题
使用SDWebImage加载多个图片时,在加载的过程中,当图片分辨率比较大的时候,加载几张图片就崩溃了.需要对图片进行处理,避免内存崩溃问题. 一.预加载图片URL数组预加载URL数组 [[SDWe ...
使用Glide加载、缓存图片、解决背景出现浅绿色
之前一直使用Volley ImageLoader.或者Picasso,无意间发现Glide,觉得真的是棒棒的. 1.和其他的一样在Module的build.gradle中添加依赖 compile 'c ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
ios wkweb设置图片_ios·WKWebView\UIWebView加载HTMLString,实现图片懒加载
背景: 项目中开发商品类型数据,数据可变性较大,所以商品详情数据存在文案和图片富文本显示,后台返回了html格式的数据供前端展示. 如果用webView直接显示的话,需要等html内容完全展示才能获取 ...

什么是懒加载，如何实现图片或列表懒加载？

文章目录

什么是懒加载

实现图片懒加载

列表懒加载

列表滚动加载

什么是懒加载，如何实现图片或列表懒加载？相关推荐

最新文章

热门文章