当前位置 博文首页 > 文章内容

    原生JS实现图片懒加载功能

    作者: 栏目:未分类 时间:2020-09-15 18:00:50

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            main{
                width: 800px;
                margin: 0 auto;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-evenly;
                
            }
            main img{
                width: 300px;
                height: 300px;  
                margin: 10px 0;          
            }
        </style>
    </head>
    <body>
        <main>
            <img src="" alt="" data-src="../../imgs/0.jpg">
            <img src="" alt="" data-src="../../imgs/1.jpg">
            <img src="" alt="" data-src="../../imgs/2.jpg">
            <img src="" alt="" data-src="../../imgs/3.jpg">
            <img src="" alt="" data-src="../../imgs/4.jpg">
            <img src="" alt="" data-src="../../imgs/5.jpg">
            <img src="" alt="" data-src="../../imgs/6.jpg">
            <img src="" alt="" data-src="../../imgs/7.jpg">
            <img src="" alt="" data-src="../../imgs/8.jpg">
            <img src="" alt="" data-src="../../imgs/9.jpg">
            <img src="" alt="" data-src="../../imgs/10.jpg">
            <img src="" alt="" data-src="../../imgs/11.jpg">
            <img src="" alt="" data-src="../../imgs/12.jpg">
            <img src="" alt="" data-src="../../imgs/13.jpg">
            <img src="" alt="" data-src="../../imgs/14.jpg">
            <img src="" alt="" data-src="../../imgs/15.jpg">
            <img src="" alt="" data-src="../../imgs/16.jpg">
            <img src="" alt="" data-src="../../imgs/17.jpg">
            <img src="" alt="" data-src="../../imgs/18.jpg">
            <img src="" alt="" data-src="../../imgs/19.jpg">
            <img src="" alt="" data-src="../../imgs/20.jpg">
         
            
        </main>
        <script>
            function lazyImg(defaults='../../imgs/0.jpg'){
                //获取需要设置懒加载的图片元素
                let lazyImgs=Array.from(document.querySelectorAll('img[data-src]')) ;

                //设置默认图片
                setDefaultImg();
                //监听滚动事件
                window.addEventListener('scroll',function(){
                    loadImgs();
                })
                //设置默认图片函数
                function setDefaultImg(){
                    
                    for(let i of lazyImgs){
                        i.src=defaults;
                    }
                    
                    loadImgs();
                }
                //懒加载必要图片
                function loadImgs(){
                    console.log(lazyImgs)
                    for(var i=0;i< lazyImgs.length;i++){
                        //检测当前位置
                        var img=lazyImgs[i];
                       if(loadImg(img)){
                        lazyImgs.splice(i,1);
                        i--;
                       }
                       
                    }
                    console.log(lazyImgs)
                }
                //分析指定元素是否到达可视区域
                function loadImg(img){
                   let position= img.getBoundingClientRect();
                   if(position.right>0&&position.left<document.documentElement.clientWidth&&
                   position.bottom>0&&position.top<document.documentElement.clientHeight){
                       
                        img.src=img.dataset.src;
                        return true;
                   }
                   return false;
                }
            }
            lazyImg();
        </script>
    </body>
    </html>