优势：提升性能
实现原理：图片是通过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>
