前端性能优化-图片滚动分页懒加载

程序员文章站 2024-03-17 19:47:28

...

1.为什么要使用懒加载

当我们进入到某个页面时，会有许多的图片，有些图片可能在下面，当我们点进页面但没有滑动全部展示时，其实下面的图片是没有作用的，这个时候如果说加载也相当于白加载，而且还降低了网页的加载速度，那懒加载就是只有滚动到可视区域时才加载当前的图片，也就是说不是一次性加载所有的图片，从而在一定程度减少了服务端的请求及带宽。

2.使用懒加载的优点
提高前端性能，图片在需要的时候才加载，减轻服务器的负担，提高页面的加载速度，能够减少带宽。

3.懒加载的实现原理
一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

4.懒加载思路及实现
1.加载loading图片
2.判断哪些图片要加载【重点】
3.隐形加载图片
4.替换真图片

下面就用lazyload来实现滚动分页图片懒加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./media.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f5f5f5;
            font-family: 'PingFang SC Regular', 'PingFang SC';
            width: 100%;
            height: 100%;
            min-width: 320px;
            max-width: 480px;

        }

        header {
            width: 100%;
            height: 1rem;
            background-color: teal;
            color: #fff;
            line-height: 1rem;
            text-align: center;
            font-size: 0.4rem;
        }
        .list{
            list-style: none;
            width: 100%;
            padding: 0.3rem;
            /* height: 4rem;
            background-color: red; */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
        }
        .list-item{
            width: 45%;
            height: 3rem;
            /* background-color: teal; */
            margin-bottom: 0.3rem;
        }
        .list-item>img{
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <header>展示区</header>
    <ul class="list">
        
    </ul>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="./lazyload.min.js"></script>
    <script>
        window.onload = function(){
            let page = 1;
            let pageSize = 10
            loadImg(page)
            function loadImg(page){
                $.ajax({
                type:'get',
                url:`https://gank.io/api/v2/data/category/Girl/type/Girl/page/${page}/count/${pageSize}`,
                dataType:'json',
                success:function(res){
                   let listTemplate = renderList(res.data);
                   $('.list').append(listTemplate)
                   $('.list li img').lazyload();
                },
                error:function(err){
                    console.log(err)
                }
            })
            }
           
            function renderList(data){
                let template = '';
                for(let i = 0; i < data.length; i++){
                    template+="<li class='list-item'> <img src='./loading.gif' alt='' data-src="+data[i].images[0]+"></li>"
                }
                return template;
            }
            $(window).scroll(function(){
                let scrollTop = Math.ceil($(this).scrollTop());
                let curH = Math.ceil($(this).height());
                let totalH = $(document).height();
                if(scrollTop + curH >= totalH){
                    console.log(11)
                    loadImg(++page)
                }
            })
        }
    </script>
</body>

</html>