原生js实现图片懒加载

最新推荐文章于 2023-10-13 10:24:17 发布

Lemon.哦

最新推荐文章于 2023-10-13 10:24:17 发布

阅读量2.2k

点赞数 6

文章标签： js html html5

本文链接：https://blog.csdn.net/Liang_nm/article/details/111769010

版权

首先，先讲讲什么叫图片懒加载吧，当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。
然后，为什么要实现图片懒加载呢？因为减少或延迟请求数，缓解浏览器的压力，增强用户体验。

第一步，获取所有图片
第二步， 获取 页面 可视区域高度
第三步， 获取 滚动 高度

<body>
    <img src="./img/loading.gif" lazyload-src="./img/1.jpg" alt="">
    <img src="./img/loading.gif" lazyload-src="./img/2.jpg" alt="">
    <img src="./img/loading.gif" lazyload-src="./img/3.jpg" alt="">
    <img src="./img/loading.gif" lazyload-src="./img/4.jpg" alt="">
    <img src="./img/loading.gif" lazyload-src="./img/5.jpg" alt="">
    <img src="./img/loading.gif" lazyload-src="./img/6.jpg" alt="">
    <img src="./img/loading.gif" lazyload-src="./img/7.jpg" alt="">
    <img src="./img/loading.gif" lazyload-src="./img/8.gif" alt="">
    <img src="./img/loading.gif" lazyload-src="./img/9.jpg" alt="">

 <script>
        function lazyLoad(){
        	var imgs=document.querySelectorAll("img");
            var innerH= window.innerHeight;    
            var scrollY= window.scrollY;
            
            for(let i=0;i<imgs.length;i++){
                if( innerH+scrollY > imgs[i].offsetTop ){
                    // console.log("图片"+i+"进入可视区域了")
                     setTimeout(function(){
                        imgs[i].src= imgs[i].getAttribute("lazyload-src")
                     },200)
                }
            }
        }
        lazyLoad()
        window.onscroll=function(){
           lazyLoad()	//页面加载时可见的图片
        }


    </script>