前端html+js实现懒加载的两种常见方法

JSU_曾是此间年少

已于 2024-08-23 14:02:54 修改

阅读量148

点赞数 7

文章标签： javascript 前端 html

于 2024-08-23 11:48:03 首次发布

本文链接：https://blog.csdn.net/m0_72678953/article/details/141462001

版权

忘记啥原因了，对图片懒加载有点好奇，于是乎查了一下有哪些方法，在这里记录下来

使用H5标准内置标签loading

参考：vue 实现懒加载_vue 懒加载-CSDN博客

注意事项：需要设置图片的宽高，尽量设置高度大一点，这样效果明显一点。不设置浏览器将不知道实际占位大小，会直接把图像加载过来。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片加载</title>
    <style >
        .ttt {
            width:100px;
            height: 500px;
            display: block;
        }
    </style>
</head>
<body>
    <div id="root" style="width: 100%;height: 100%;">
        <img class="ttt" src="./imgs/亿元机构海报1.png" alt="aaaa" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报2.png" alt="aaaa" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报3.png" alt="aaaa" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报4.png" alt="aaaa" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报5.png" alt="aaaa" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报6.png" alt="aaaa" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报7.png" alt="aaaa" loading="lazy">

        <img class="ttt" src="./imgs/亿元机构海报8.png" alt="bbb" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报9.png" alt="bbb" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报10.png" alt="ccc" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报11.png" alt="ccc" loading="lazy">
        <img class="ttt" src="./imgs/亿元机构海报12.png" alt="ccc" loading="lazy">
        
        
    </div>
</body>
</html>

使用JS的API——IntersectionObserver

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

参考文章1（推荐）：https://cloud.tencent.com/developer/article/1528620

参考文章2（包含实例）：IntersectionObserver一分钟学会，超级简单-CSDN博客

注意事项：注意搞清楚里面各个变量代表的含义即可

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用js IntersectionObserver API进行懒加载</title>

    <style>
        .ttt {
            /* width:100px; */
            height: 500px;
            display: block;
        }
    </style>
</head>

<body>
    <div id="root" style="width: 100vw;height: 100vh">
        <img class="ttt" data-src="./imgs/亿元机构海报1.png" alt="aaaa">
        <img class="ttt" data-src="./imgs/亿元机构海报2.png" alt="aaaa">
        <img class="ttt" data-src="./imgs/亿元机构海报3.png" alt="aaaa">
        <img class="ttt" data-src="./imgs/亿元机构海报4.png" alt="aaaa">
        <img class="ttt" data-src="./imgs/亿元机构海报5.png" alt="aaaa">
        <img class="ttt" data-src="./imgs/亿元机构海报6.png" alt="aaaa">
        <img class="ttt" data-src="./imgs/亿元机构海报7.png" alt="aaaa">
        <img class="ttt" data-src="./imgs/亿元机构海报8.png" alt="bbb">
        <img class="ttt" data-src="./imgs/亿元机构海报9.png" alt="bbb">
        <img class="ttt" data-src="./imgs/亿元机构海报10.png" alt="ccc">
        <img class="ttt" data-src="./imgs/亿元机构海报11.png" alt="ccc">
        <img class="ttt" data-src="./imgs/亿元机构海报12.png" alt="ccc">
    </div>
    <script>
        const observer = new IntersectionObserver((entries, observer) => {
            // entries 是当前出现在视图的所有元素的数组
            entries.forEach(item => {
                if (item.isIntersecting) {

                    // H5 使用 dataset.src 访问原始dom上面的data-xxx属性
                    item.target.src = item.target.dataset.src;
                    observer.unobserve(item.target);
                }
            })
        })
        console.log('xxxxx', document.querySelectorAll('img[data-src]'));
        document.querySelectorAll('img[data-src]').forEach(img => {
            observer.observe(img)
        })
    </script>
</body>

</html>