原生js实现图片懒加载

1.图片懒加载能够提升网页的加载速度，进而提升了系统的性能
具体代码如下

<body>
    <img src="./images/loading.gif" data-src="./images/Sticker01.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker02.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker03.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker04.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker05.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker06.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker01.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker02.png" alt="">
    <img src="./images/loading.gif" data-src="./images/Sticker03.png" alt="">
    <script>
        let num = document.getElementsByTagName("img").length
        let imgs = document.getElementsByTagName("img")
        // console.log(num);
        // console.log(imgs);

        lazyload()
        // 窗口滚动时，重新调用懒加载方法
        window.onscroll = lazyload
        function lazyload(){
            // 视口高度
            let seeHeight = document.documentElement.clientHeight;//可见区域高度
            // 滚动条距离视口顶部的高度
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            for(let i=0; i< imgs.length;i++){
                // 判断当前的图片是否位于可视窗口范围内
                if(imgs[i].offsetTop < seeHeight + scrollTop){
                    // 如果当前图片为默认的加载图片，则替换相应的图片
                    if(imgs[i].getAttribute("src") == "./images/loading.gif"){
                        imgs[i].src = imgs[i].getAttribute("data-src")
                    }
                }
            }
        }
    </script>
</body>
posted @ 2023-01-05 15:14  胡同树下  阅读(133)  评论(0)    收藏  举报