优势：提升性能
实现原理：图片是通过img的src属性，当对src赋值时，浏览器就会请求图片资源。
基于这个问题，我们可以利用标签的自定义属性(data-xxx)，来保存图片的路径，当我们需要加载图片
的时候，将data-xxx赋值给src就可以实现按需进入按需加载。
插件(lazyload)
网址：https://github.com/jieyou/lazyload
移动端懒加载案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
header {
/* z-index: 2; */
width: 100%;
height: 80px;
line-height: 80px;
background: chocolate;
}
section {
flex: 1;
background: darkgray;
}
section ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
width: 40%;
height: 300px;
padding: 10px;
}
ul li img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<header>aaa</header>
<section>
<ul>
<!-- <li>
<img src="img/loading.jpg" alt="">
</li> -->
</ul>
</section>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/zepto.ajax.js"></script>
<!-- lazyload是基于zepto -->
<script src="js/lazyload.min.js"></script>
<script>
$(function () {
var Opages = 1; //页数
var Osizes = 4; //每页数量
// 一打开页面，发送ajax请求和插入dom结构
FImgLoad();
// 页面滚动
$(window).scroll(function () {
// 滚动高度
var scrollH = $(window).scrollTop();
// 可视高度
var winHeight = $(window).height();
// 文档高度
var tatalHeight = $(document).height() - 5;
// console.log("01是 " + scrollH, "02是 " + winHeight, "03是 " + tatalHeight);
// 触底时 ： 滚动高度 + 可视高度 >= 文档高度
if (scrollH + winHeight >= tatalHeight) {
// 下一页
Opages += 1;
FImgLoad(Opages);
}
})
function FImgLoad() {
// 发送ajax请求和插入dom结构
$.ajax({
url: 'http://39.101.217.150:8075/jobs/list',
data: {
// 页面
page: Opages,
// 数量
size: Osizes
},
success: function (data) {
var datas = data.data.records;
console.log(datas);
$.each(datas, function (index, item) {
// 懒加载图片路径使用 data-original="图片路径"；而 src="img/loading.jpg"里是加载前的图片
$('section ul').append(`
<li>
<img class="lazy" data-original="${item.imgurl}" src="img/loading.jpg" alt="">
</li>
`)
})
// 懒加载
// 给所有的图片标签加上class="lazy"，再执行$('img.lazy').lazyload()
$('img.lazy').lazyload({
// 图片以前加载：图像在它离视窗边缘还有200px时开始加载
threshold: 200,
// 设置图片在某个容器中滚动（一般是大的父元素）
container: $("section")
});
}
})
}
})
</script>
</body>
</html>
移动端下拉刷新、上拉加载
参考网址：https://www.jq22.com/jquery-info6960
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Document</title>
<link rel="stylesheet" href="css/dropload.css">
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
header {
width: 100%;
height: 80px;
text-align: center;
line-height: 80px;
background-color: pink;
}
section {
flex: 1;
background-color: #ccc;
overflow-y: scroll;
}
section ul li {
width: 100%;
height: 200px;
}
section ul li+li {
margin-top: 30px;
}
section ul li img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class='container'>
<header>头部</header>
<section class='home'>
<ul>
<li>
<img src="img/wx.jpg" alt="">
</li>
<li>
<img src="img/wx.jpg" alt="">
</li>
<li>
<img src="img/wx.jpg" alt="">
</li>
<li>
<img src="img/wx.jpg" alt="">
</li>
<li>
<img src="img/wx.jpg" alt="">
</li>
<li>
<img src="img/wx.jpg" alt="">
</li>
<li>
<img src="img/wx.jpg" alt="">
</li>
<li>
<img src="img/wx.jpg" alt="">
</li>
<li>
<img src="img/wx.jpg" alt="">
</li>
<li>
<img src="img/wx.jpg" alt="">
</li>
</ul>
</section>
</div>
<script src="js/zepto.min.js"></script>
<!-- 下拉刷新，上拉加载 -->
<script src="js/dropload.min.js"></script>
<script>
$(function () {
var pages = 1; //页数
var Odropload = $('.home').dropload({
// 上方DOM
domUp: {
domClass: 'dropload-up',
domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate: '<div class="dropload-update">↑释放更新</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
},
// 下方DOM
domDown: {
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData: '<div class="dropload-noData">暂无数据</div>'
},
// 上方-刷新
loadUpFn: function () {
$.ajax({
url: 'http://39.101.217.150:8075/jobs/list',
data: {
page: 1,
size: 3
},
success: function (data) {
var datas = data.data.records;
console.log(data,'上方-刷新')
pages = 1; //刷新后，页数恢复默认
var result = '';
$.each(datas, function (index, item) {
result += `
<li>
<img src="${item.imgurl}" alt="">
</li>
`;
});
$('.home ul').html(result);
// 每次数据加载完，必须重置
Odropload.resetload();
},
error: function (xhr, type) {
alert('Ajax error!');
// 即使加载出错，也得重置
Odropload.resetload();
}
})
},
// 下方-加载
loadDownFn: function () {
$.ajax({
url: 'http://39.101.217.150:8075/jobs/list',
data: {
page: 1,
size: pages
},
success: function (data) {
var datas = data.data.records;
console.log(data, '下方-加载')
pages++; //每次下拉，页数自加
console.log(pages)
var result = '';
$.each(datas, function (index, item) {
result += `
<li>
<img src="${item.imgurl}" alt="">
</li>
`;
});
$('.home ul').append(result);
// 每次数据加载完，必须重置
Odropload.resetload();
},
error: function (xhr, type) {
alert('Ajax error!');
// 即使加载出错，也得重置
Odropload.resetload();
}
})
}
})
})
</script>
</body>
</html>
