1.懒加载的优点
提高前端性能,图片按需加载,减轻服务器的压力,提高页面的响应速度,减少带宽。
2.实现原理
图片的加载通过 src ,对 src 赋值时浏览器会请求图片,src = ' ' 时不会发生请求。
基于 html5 的 自定义 data-xxx 来实现,也就是 data-xxx 存放的图片的真实路径,需要加载图片的时候,再将 data-xxx 的值赋值给 src。
<img data-src = "图片的真实路径" src = " " />
3.实现
当然,向后台请求数据时,会进行分页处理的。
- 第一种方式: 引入jquery.lazyload.js
<script src = "./js/jquery.lazyload.js"></script>
<script>
$(".img-group ul img").lazyload();
</script>
- 第二种方式:手写
$(function () {
var pageNum = 1,
pageSize = 10;
// 作为初次的请求触发
getData(pageNum);
// 几个高度的问题
$(window).scroll = function () {
var scrollTop = Math.ceil($(this).scrollTop()); // 滚动高度,滚动条到顶距离 处理一下,必须整数
var clientHeight = $(this).height; // 可视高度,固定值
var totalHeight = $(document).height(); // document 当前页面的高度
// 如果 滚动高度 + 可视高度 >= 页面高度 就说明滚动条到底了,需要请求下一页的数据
if (scrollTop + clientHeight >= totalHeight) {
getData(++pageNum); // 要先 ++
}
}
})
// 请求数据
function getData(pageNum) {
$.ajax({
type: 'get',
url: `http://localhost:8080/getLists/${pageNum}/${pageSize}`,
dataType: 'json',
success: () => {
$.each(res, (index, item) => {
$(".img-group ul img").append(`随心所欲`)
});
$(".img-group ul img").lazyload();
},
error: () => {
console.debug(error)
}
})
}
不要随波逐流,要找到自己的路。