简单的图片懒加载效果代码

最新推荐文章于 2025-06-03 22:01:55 发布

门前大桥下.

最新推荐文章于 2025-06-03 22:01:55 发布

阅读量389

点赞数 1

分类专栏： javaScript特效文章标签： js dom bom html

本文链接：https://blog.youkuaiyun.com/preserveXing/article/details/117755335

版权

javaScript特效专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了如何实现简单的图片懒加载效果，并提供了可直接使用的代码示例。懒加载通过延迟加载非视口内的图片，提高了网页的加载速度。文章还探讨了其工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.简单的图片懒加载效果代码

可复制使用注意图片的src 你是否一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <img src="./1.gif" data-imgurl="./1.gif" alt="">
    <img src="./1.gif" data-imgurl="./1.jpg" alt="">
    <img src="./1.gif" data-imgurl="./2.jpg" alt="">
    <img src="./1.gif" data-imgurl="./3.jpg" alt="">
    <script>
        //逻辑 当图片的 offsettop < html.scrolltop+windowm.clientHeigt
        //图片将要在 client可视区展示   要发请求加载图片
        (function () {
            window.onscroll = function () {
                //获取位置
                var imglist = document.querySelectorAll("img");
                //划过去的高度
                var crossHeight = document.documentElement.scrollTop;
                //可视区高度
                var look = window.innerHeight;
                //添加事件
                imglist.forEach((item, index) => {
                    // console.log(item.offsetTop);
                    console.log(crossHeight);
                    var bol = item.offsetTop < crossHeight + look
                    if (bol) {
                        console.log("好了");
                        item.src = item.getAttribute("data-imgurl")
                    }
                })
            }
        })()
    </script>
</body>
</html>

2.原理分析

在这里插入图片描述