浏览器图片懒加载

最新推荐文章于 2023-06-11 09:00:30 发布

不平凡的我？

最新推荐文章于 2023-06-11 09:00:30 发布

阅读量285

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/qq_63545706/article/details/128279911

版权

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 成了回调函数