likes
comments
collection
share

一眼就能明白的懒加载实现原理！

作者站长头像
站长
· 阅读数 35

前提

介绍

图片懒加载是一种优化网页性能的技术，它可以延迟加载页面中的图片，只有当用户将图片滚动到可见区域时才加载图片，而不是一开始就加载所有图片。

作用

  1. 可以加快页面加载速度，减少页面加载时对带宽和性能的压力。
  2. 减少带宽消耗，提升用户体验。
  3. 这种技术特别适用于页面上包含大量图片的情况，比如相册、商品列表等页面。

实现思路

  1. 确保所有图片元素的 src 属性为空，或者使用一个占位图。
  2. 将真实的图片地址保存在自定义属性（比如 data-src）中。
  3. 监听页面滚动事件，当用户滚动页面时，检查每个图片元素是否进入了可视区域。
  4. 如果图片进入了可视区域，则将保存在 data-src 中的真实图片地址赋值给 src 属性，从而触发图片的加载显示。

手写一个简单的懒加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Load Images</title>
    <style>
        .container {
            margin-top: 800px;
        }
        img {
            width: 230px;
            height: 160px;
            margin-left: 10px;
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <!-- 图片容器 -->
    <div class="container">
        <!-- 初始时使用空src，并在data-src中指定真实图片路径 -->
        <img src="" data-src="../image/saibo.png"> 
        <img src="" data-src="../image/saibo.png">
        <img src="" data-src="../image/saibo.png">
        <img src="" data-src="../image/saibo.png">
        <img src="" data-src="../image/saibo.png">
        <img src="" data-src="../image/saibo.png">
    </div>
    <script>
        // 获取所有图片元素
        var images = document.querySelectorAll('img');

        // 懒加载函数
        function lazyLoad() {
            // 获取滚动条距离顶部的距离
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log('滚动条距离顶部的距离' + scrollTop);
            // 获取窗口高度
            var winHeight = window.innerHeight;
            console.log('窗口高度' + winHeight);
            console.log('可视窗口的底部到最顶部的距离' + (scrollTop + winHeight));
            // 遍历所有图片元素
            for (var i = 0; i < images.length; i++) {
                // 如果图片距离顶部的距离小于窗口高度
                if (images[i].offsetTop < scrollTop + winHeight) {
                    // 将 data-src 中的真实图片路径赋值给 src，触发图片加载
                    images[i].src = images[i].getAttribute('data-src');
                }
            }
        }
        // 监听滚动事件，当页面滚动时执行懒加载函数
        window.onscroll = lazyLoad;
    </script>
</body>

</html>

  • document.body.scrollTop：表示页面 <body> 元素在垂直方向已经滚动的像素值。在一些浏览器中，可以使用这个属性来获取页面滚动的距离。

  • document.documentElement.scrollTop：这是为了兼容一些旧版本的 IE 浏览器，它表示文档根元素（即 <html> 元素）的滚动偏移量，即页面顶部被滚动隐藏的像素值。

  • images[i].offsetTop 表示每个图片元素相对于其最近的已定位（positioned）祖先元素的顶部内边距的偏移量。如果没有已定位的祖先元素，则它的偏移量是相对于 <html> 元素的顶部内边距。

  • getAttribute 是 js 中用于获取指定元素的属性值的方法。通过 getAttribute 方法，可以获取元素上指定属性的值。

注： var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 通过使用 || 运算符，可以获得两者中非空的值，以确保跨浏览器兼容性。不同的浏览器可能会选择不同的属性来表示页面的垂直滚动位置，因此这种写法能够在不同浏览器中正常工作。

效果对比

开始状态：

一眼就能明白的懒加载实现原理！

滑动后状态：

我们可以看到图片已经出现

一眼就能明白的懒加载实现原理！

再来看看图片链接是否调用

一眼就能明白的懒加载实现原理！

懒加载（Lazy Loading）和预加载（Preloading）

  1. 懒加载（Lazy Loading）： 懒加载是一种延迟加载内容的技术，特别适用于图片等资源较大或不是首要展示内容的情况。懒加载的主要原理是只在用户需要时才加载相应的内容，而不是一次性加载所有内容。常见的应用场景是图片懒加载，即在页面初次加载时，先使用占位图或空白图片代替真实图片，当用户滚动到图片可见区域时再加载真实图片，从而减少页面加载时间和带宽消耗。

  2. 预加载（Preloading）： 预加载是一种在页面加载过程中提前加载未使用但将来会用到的资源的技术。通过预加载可以在用户需要之前将某些资源加载到缓存中，以提高后续访问时的加载速度。常见的应用包括提前加载下一页的内容、预加载用户可能进行的操作所需的资源等。预加载可以通过 JavaScript 的 Image 对象、link 标签等方式实

所以，懒加载适用于延迟加载不急需的内容，预加载适用于提前加载将来会使用到的重要资源，两者结合可以有效提升网页性能和用户体验。

转载自:https://juejin.cn/post/7347952593811685410
评论
请登录