使用原生js编写一个图片缓加载案例

盛夏夜未央

已于 2023-06-06 11:37:30 修改

阅读量88

点赞数

文章标签： javascript css html

于 2023-06-05 21:16:25 首次发布

本文链接：https://blog.csdn.net/qq_56696697/article/details/131056279

版权

该代码示例展示了如何使用HTML和JavaScript实现图片懒加载效果。当用户滚动页面时，图片会按需加载，提高网页性能。初始显示加载占位符load.gif，随着滚动，图片的真实源(data-src)被替换到src属性中，从而减少初次加载时的数据量。

摘要由CSDN通过智能技术生成

代码如下:

<!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{
            width: 500px;
            height: 500px;
            display: block;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <img src="./load.gif" alt="" data-src="./1.png">
    <img src="./load.gif" alt="" data-src="./2.png">
    <img src="./load.gif" alt="" data-src="./3.png">
    <img src="./load.gif" alt="" data-src="./4.png">
    <img src="./load.gif" alt="" data-src="./5.png">
    <img src="./load.gif" alt="" data-src="./6.png">
    <script>
        // 获取img标签个数
        let num=document.getElementsByTagName("img").length
        // 获取img标签位置
        let img=document.getElementsByTagName("img")
        let n=0//防止重复加载
        lazyload()
        window.onscroll=lazyload//健康滑动触发lazyload
        function lazyload(){
            // 获取页面高度
            let seeHeight=document.documentElement.clientHeight
    // 获取滑轮距离顶部高度
            let scrollTop=document.documentElement.scrollTop
            // console.log(seeHeight,scrollTop);
            // for循环遍历img置换
            for (let i=n;i<num;i++){
                // offsetTop为图像距离顶部高度
                if(img[i].offsetTop<seeHeight+scrollTop){
                    img[i].src=img[i].getAttribute("data-src")//置换src数据
                    n=i+1
                }
               
            }
        }
    </script>
</body>
</html>

注意! ! ! !........load.gif，1.png，2.png.......等图需要自己替换才能使用

运行结果初始图:

选定低速3G看着更明显