web新能优化四-图片的懒加载

最新推荐文章于 2024-05-30 17:38:42 发布

写代码的我

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量565

点赞数

分类专栏：个人实践 web性能优化文章标签：图片优化用户体验 web

本文链接：https://blog.csdn.net/ASD850861363/article/details/78697830

版权

个人实践同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

web性能优化

3 篇文章 0 订阅

订阅专栏

在做web端开发的时候，有些场景是需要加载很多资源的，比如图片、css、js等，举个例子来说，在电商网站，需要很多图片，但是浏览器并行加载资源的能力是有限的，这就需要我们思考如何能在不影响用户体验的情况下解决这个问题，从而提高用户体验，今天这篇文章主要是讲解图片的懒加载和预加载实现原理

懒加载实现原理

先看一张图

当我们的图片不在可视区域内，浏览器不会加载图片资源，当我们的图片进入可视区域，去请求资源
这个时候需要去监听scroll事件，在scroll事件的回调中，去判断懒加载的图片是否在可视区域
需要知道整个手机屏幕的高度height，还有懒加载的图片是否进入可视区域,上边缘top与height的比较

来我们先看一下手淘网站是怎么实现图片懒加载的
手淘网站懒加载示意图

lazyload

从以上两张图中可以看到手淘使用了懒加载技术，它会提前把图片的url存放在data-image这个属性中，等scroll到这个图片的时候，再把url放在img的src上开始加载图片，同时去掉lazyload的属性就可以了。接下来，我给大家准备了一个简单的demo,来实现懒加载的效果，大家就会明白懒加载的实现原理是什么了。

HTML

<!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">
    <title>懒加载</title>
    <link rel="stylesheet" href="./main.css">
</head>

<body>
    <div class="image-list">
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2048320673,585588639&fm=200&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1314614636,1104617902&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1188734066,1612191317&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=189835623,747133716&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1069058874,714751845&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2117740928,4022788063&fm=200&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1226935977,279123673&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2114582188,2400828084&fm=200&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2682530319,821374529&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2917618884,954472175&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1297574326,2374783510&fm=200&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=915649383,5826850&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2649107868,4130636842&fm=200&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1492742573,3780054889&fm=11&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1129138747,3617672605&fm=11&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3266475804,3837111637&fm=200&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2091400635,3282083388&fm=11&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=872452946,1452698219&fm=11&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2838282368,3051708889&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=651246321,2706649063&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=709719514,1780049916&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3250370743,2700982366&fm=27&gp=0.jpg" />
        <img src="" lazyload="true" alt="" class="image-item" data-original="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=86523415,926805342&fm=27&gp=0.jpg" />
    </div>
    <script src="./lazyload.js"></script>
</body>

</html>

css

.image-item {
    width: 40%;
    margin-right: 5%;
    display: inline-block;
    height: 200px;
    background: grey;
}

.image-list {
    margin-left: 5%;
}

Javascript

var viewHeight = document.documentElement.clientHeight; // 可视区域高度

function lazyload() {
    var eles = document.querySelectorAll('img[data-original][lazyload]');
    Array.prototype.forEach.call(eles, function(item, index) {
        var rect
        if (item.dataset.original === '')
            return
        rect = item.getBoundingClientRect();
        // getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
        //   rectObject.top：元素上边到视窗上边的距离;

        // 　rectObject.right：元素右边到视窗左边的距离;

        // 　rectObject.bottom：元素下边到视窗上边的距离;

        // 　rectObject.left：元素左边到视窗左边的距离;
        if (rect.bottom >= 0 && rect.top < viewHeight) {
            // 立即执行函数
            ! function() {
                var img = new Image();
                img.src = item.dataset.original;
                img.onload = function() {
                    item.src = img.src
                }
                item.removeAttribute('data-original')
                item.removeAttribute('lazyload')
            }()
        }
    })
}

lazyload()
document.addEventListener('scroll', lazyload)

页面效果

demo效果

在js代码中我们首先是获取了可视区域的高度viewHeight ，并且声明一个函数，函数的作用就是判断图片是否进入到可视区域，进入到可视区域后对图片进行加载并显示在页面上，同时去掉标签内的属性

总结，以上是使用原生写法实现图片栏架的方法，现在有很多封装好的库都可以实现，依赖于jquery,react和vue等框架的，大家可以自行搜索。

写代码的我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web新能优化四-图片的懒加载

在做web端开发的时候，有些场景是需要加载很多资源的，比如图片、css、js等，举个例子来说，在电商网站，需要很多图片，但是浏览器并行加载资源的能力是有限的，这就需要我们思考如何能在不影响用户体验的情况下解决这个问题，从而提高用户体验，今天这篇文章主要是讲解图片的懒加载和预加载实现原理懒加载实现原理先看一张图当我们的图片不在可视区域内，浏览器不会加载图片资源，当我们的图片进入可视区域
复制链接

扫一扫