1 什么是懒加载?
- 懒加载也叫做 延迟加载、按需加载 ,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样使得网页的加载速度更快,减少了服务器的负载。懒加载适用于图片较多,页面列表较长(长列表)的场景中。
2 为什么要优化?
- 因为浏览器对于多个图片的请求地址的请求方式 是同步发起请求的 谁的响应快就先渲染谁 有可能会造成页面底部的图片先渲染 前面的图片一直未加载出来
3 懒加载的实现:
- 懒加载一般都是插件完成的 : lazyload实现懒加载 官网: https://www.lazyloadjs.cn/
- 使用lazyload
- 引入lazyload插件
- 改变img标签的编写方式
- 调用lazyload功能
4 代码实现
<body>
<div class="recomment-wrap">
<h2>
<img src="https://image2.suning.cn/uimg/cms/img/159503836368389136.png" alt="">
</h2>
<div class="recomment-list">
<!-- 商品懒加载功能 -->
<!-- <div class="recomment-box">
<img src="" alt="">
<p></p>
</div> -->
</div>
</div>
<script src="jQuery.js"></script>
<script src="lazyload.js"></script>
<script>
// 请求加载 再去渲染页面
function getRecommentDate() {
// 加载数据的内容 和数据的数量都是由参数来决定的
let options = {
// 根据接口文档提供的参数可知 我们现在一次性懒加载30条数据需要传递pagesize属性
data: {
pagesize: 100
}
}
// 默认为get请求
return $.ajax("http://localhost:8888/goods/list", options)
}
function renderRecomment(data) {
// 获取响应数据之中的商品列表
// 把商品列表之中的机构进行字符串拼接 拼接之后放入到recomment-list结构之中
// 等待图片的地址;
let loadingsrc = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.it610.com%2Fimage%2Finfo5%2F6b8347bd4f5e4d499510c77eafbdcb35.gif&refer=http%3A%2F%2Fimg.it610.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671524514&t=366292a56a4cf8eb0ddf7d0781f6b4ff";
// - 把正常的图片资源放在了data-src之中
// - 设置了默认图片资源(图片资源要一致)
// - 给图片添加lazyload类名
let { list } = data
console.log(data)
$(".recomment-list").html(
list.map(item => {
return `<div class="recomment-box" data-id=${item.goods_id}>
<img class="lazyload" src="${loadingsrc}" data-src="${item.img_big_logo}" alt="">
<p>${item.title}</p>
</div>`
}).join("")
)
lazyload()
}
getRecommentDate().done(renderRecomment) // renderRecomment 成了回调函数