图片的懒加载方式

Posted IT-忐忑

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片的懒加载方式相关的知识，希望对你有一定的参考价值。

　　在这先说一下什么叫做懒加载，懒加载就是延尺加载。而什么时候要用到延迟加载呢，答案就是当我们所访问的页面数据量过大的时候，明显用缓存不太合适的时候。

　　因为内存有限，为了减少并发量，减少系统资源的消耗成了必然。我们只有让数据在需要的时候才进行加载。就像浏览大量图片的网页的时候我们如果不用懒加载的方

　　式，会降低用户的体验（顾客是上帝吗）；

而说到图片的懒加载的方式就是

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                display: block;
                width: 500px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="banner">
            <img data-src="image/01.jpeg">
            <img data-src="image/02.jpeg">
            <img data-src="image/03.jpeg">
            <img data-src="image/04.jpeg">
            <img data-src="image/05.jpg">
        </div>
 
        <script type="text/javascript">
            window.onload=function(){
                var banner=document.getElementById("banner");
                var imgs=banner.getElementsByTagName("img");
                 add();//页面加载完成先执行一次
                function getTop(obj){ //写一个方法获取图片距离top的值
                    var t=0;     　//定义一个保存top值的 变量
                    while(obj){　　//循环获取每个父级定位的top值
                        t+=obj.offsetTop;  //获取传入或改变父级定位的top值，当到大body的时候没有 他的父级定位为null所以就停了
                        obj=obj.offsetParent; //获取obj的父级定位
                        console.log(t)
                        console.log(obj)
                    }
                    return t;
                }
                function add(){
                    var S = document.documentElement.scrollTop || document.body.scrollTop; //获取滑动条距top的值
                    var H = window.innerHeight; //获取显示区域高度（只读）
                    for(var i=0;i<imgs.length;i++){  //循环图片
                        if((S+H) > getTop(imgs[i])){ 判断图片是否进入可视区域
                            imgs[i].setAttribute("src",imgs[i].getAttribute("data-src")); //当进入的时候给src 赋值
                        }
                    }
                }
                 
                window.onscroll=function(){ //每次滚动运行方法判断
                    add()
                }
            }
        </script>
    </body>
</html>

这样就可以有效的解决我们加载时的用户的体验了；

以上是关于图片的懒加载方式的主要内容，如果未能解决你的问题，请参考以下文章

整页图片的懒加载

图片网站中的懒加载和预加载（转）

JavaScript使用纯JS实现多张图片的懒加载Lazy（附源码）

swiper.js 多图片页面的懒加载lazyLoading

关于Fragment的懒加载问题

懒加载的3种实现方式