原生JS实现图片懒加载

最新推荐文章于 2024-07-07 18:28:23 发布

person_liu_

最新推荐文章于 2024-07-07 18:28:23 发布

阅读量286

点赞数

分类专栏：前端文章标签： js css html

原文链接：https://www.cnblogs.com/peerless1029/p/10771695.html

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原生JS实现图片懒加载

实现原理

预先将图片的url保存在ing 的 data-src属性之中，通过js判断图片是否在浏览器的窗口之中，如果在便将data-src的值赋给src.

HTML 和CSS部分

这两部分比较简单，直接上代码：

<!DOCTYPE html>
<html>
    <head>
        <title>图片懒加载</title>
        <meta charset="utf-8">
        <style>
            ul{
                margin:0;
                padding: 0;
                list-style: none;
            }
            ul li{
                width: 500px;
                height: 309px;
            }
            ul li img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <ul id="pictures">
            <li>
                <img src="image/1.jpg" alt="" data-src="image/1.jpg">
            </li>
            <li>
                <img src="" alt="" data-src="image/2.jpg">
            </li>
            <li>
                <img src="" alt="" data-src="image/3.jpg">
            </li>
            <li>
                <img src="" alt="" data-src="image/4.jpg">
            </li>
            <li>
                <img src="" alt="" data-src="image/5.jpg">
            </li>
        </ul>
    </body>
</html>

JS

如何判别图片是否在可视区是关键，由于浏览器窗口大小有限，一般无法显示整个HTML页面，所以页面大致被分为三个部分：处于浏览器窗口上面的部分（即被遮挡的部分），处于可视窗口内（即我们能看到的部分），处于浏览器窗口下面的部分（还未出现的部分）。
先介绍几个函数：
1、offsetTop：返回本元素上边框与父元素边框之间的距离，这里的父元素指的是非static定位元素(static定位即默认定位)。如果父元素（这里其实说祖先元素更合适），均为static定位，那么则返回和body的距离。
2、documentElemet.scrollTop:返回页面的顶部scroll的长度，即页面上部被遮挡的长度。
3、window.innerHeight:返回浏览器窗口的长度。
由于CSS部分均未设置定位,此时img.offsetTop即返回到body的距离，即到HTML页面顶部的距离。
因此只要img.offsetTop>scrollTop（即大于页面上部被遮挡的部分的长度），并且img.offsetTop<scrollTop+window.innerHeight（即图片还未处于页面下部被隐藏的部分），那么图片便全部或者部分出现在浏览器窗口之中。

 const pictures=document.getElementById("pictures");
            var len=pictures.children.length;
            var timer=null;

            window.addEventListener('scroll',function()
            {
                if(timer)
                {
                    clearInterval(timer);
                }
                timer=setInterval(()=>{
                        lazyloading();
                    },300)
            });
            function lazyloading()
            {
               for(var i=0;i<len;i++)
               {
                   var scrollTop=document.documentElement.scrollTop;
                   var height=window.innerHeight;
                   var offsetTop=pictures.children[i].offsetTop;
                   if(offsetTop>=scrollTop&&offsetTop<scrollTop+height)
                   {
                        var img=pictures.children[i].firstElementChild;
                        if(img.getAttribute("src")!==img.getAttribute("data-src"))
                        {
                            img.setAttribute("src",img.getAttribute("data-src"));
                        } 
                   }
               }
          lazyloading()