用js 实现图片的懒加载

最新推荐文章于 2024-10-01 20:12:28 发布

一只白色的猫

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量60

点赞数

分类专栏： java script 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42062619/article/details/131722824

版权

java script 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在项目优化中，我们应该减少http的请求，实现懒加载，现在我们用js 实现一个懒加载的功能

我们一共有7张图片和一张加载的图片。

<body>
    <div>
        <img src="./img/loading.jpg" data-src="./img/cat1.jpg">
        <img src="./img/loading.jpg" data-src="./img/cat2.jpg">
        <img src="./img/loading.jpg" data-src="./img/cat3.jpg">
        <img src="./img/loading.jpg" data-src="./img/cat4.jpg">
        <img src="./img/loading.jpg" data-src="./img/cat5.jpg">
        <img src="./img/loading.jpg" data-src="./img/cat6.jpg">
        <img src="./img/loading.jpg" data-src="./img/cat7.jpg">
    </div>
</body>

// 我们开监听窗口的滚动，触发懒加载
<script>
    const img = document.getElementsByTagName("img")
    let n = 0
    console.log(img[2].offsetTop);
  
    const lazyLoad = ()=>{
        // 窗口滚动时触发
        console.log('懒加载');
        const seeHeight = document.documentElement.clientHeight // 可见区
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 滚轮的距离
    
        for(let i = n;i<img.length;i++){
         console.log(img[i].offsetTop );
         console.log(seeHeight,'+',scrollTop);
            if(img[i].offsetTop < seeHeight + scrollTop){
                
                if(img[i].getAttribute("src") == "./img/loading.jpg"){
                    img[i].src = img[i].getAttribute("data-src")
                }
               n = i+1
            }
           
        }
    }
    lazyLoad()
    window.onscroll = lazyLoad

    
</script>