js懒加载代码,节省服务器带宽

发表于 2019-03-29   |   分类于 js
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>        
            img{
                width: 500px;
                height: 500px;
                display: block;
            }
        </style>
    </head>
    <body>
            <div class = "box">
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
                <img asrc = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="" alt="img1"/>
            </div>
    </body>
    <script type="text/javascript">
        (function(){
            function tagName(tagName){
                return document.getElementsByTagName(tagName);
            }function addEvent(obj,type,func){
                if(obj.addEventListener){
                    obj.addEventListener(type,func,false);
                }else if(obj.attachEvent){
                    obj.attachEvent('on'+type,func);
                }
            }
            var v = {
                eleGroup:null,
                eleTop:null,
                eleHeight:null,
                screenHeight:null,
                limitHeight:null
            }
            function init(element){
                v.eleGroup = document.getElementsByTagName(element);
                v.screenHeight = document.documentElement.clientHeight;
                var len = v.eleGroup.length;
                for(var i = 0;i < len; i++){
                    if(v.eleGroup[i].offsetTop<v.screenHeight&&v.eleGroup[i].getAttribute("asrc")){
                        v.eleGroup[i].setAttribute("src",v.eleGroup[i].getAttribute("asrc"));
                        v.eleGroup[i].removeAttribute("asrc");
                    }
                }
            }
            function lazyload(){
                v.limitHeight = document.documentElement.scrollTop || document.body.scrollTop + document.documentElement.clientHeight;
                var len = v.eleGroup.length;
                for(var j = 0 ;j < len; j++){
                    if(v.eleGroup[j].offsetTop <= v.limitHeight&&v.eleGroup[j].getAttribute("asrc")){
                        v.eleGroup[j].setAttribute("src",v.eleGroup[j].getAttribute("asrc"));
                        v.eleGroup[j].removeAttribute("asrc");
                    }
                }
            }
            init("img");
            addEvent(window,"scroll",lazyload);
        })()
    </script>
</html>
© 2019 Powered by Typecho & Theme Quark