原生js实现图片懒加载

最新推荐文章于 2024-07-31 08:45:55 发布

Amanda&Rachel

最新推荐文章于 2024-07-31 08:45:55 发布

阅读量161

点赞数 1

分类专栏： JavaScript学习总结文章标签： js html5 javascript 前端

本文链接：https://blog.csdn.net/m0_51907938/article/details/112793008

版权

JavaScript学习总结专栏收录该内容

52 篇文章 1 订阅

订阅专栏

我们为什么需要图片懒加载

有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。

为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

图片懒加载原理

当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。

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

可以看下这张图，画的挺清楚的
在这里插入图片描述

代码如下：

<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>