原生javascript-图片滚动按需加载

来源：互联网发布：东方不败网络歌手编辑：程序博客网时间：2024/06/06 10:47

图片滚动按需加载：在某个区域的图片（自定义的范围，一般是首屏以下的区域），拉动滚动，图片出现在可视范围才开始加载，目的是减少请求，减耗宽带，提高首屏的呈现速度，让用户第一时间看到网页内容，留下美好的第一印象。

讲解：

（一）需要按需加载的img标签，图片的真实地址保存到自定义的属性里，如'data-src'，那么src属性用一张1像素透明的图片

（二）把某范围内的img标签元素保存到数组里面

（三）定义一个方法：遍历数组元素，然后判断某元素的offsetTop是否在滚动的可视范围，如果在，交换图片的属性（'data-src','src'），然后删除这个元素，那么在下次遍历就不存在

load:function(){        // 全部加装，解除事件        if(this.imgList.length == 0){            this.removeHandler(window,'scroll',this.fnLoad);            this.removeHandler(window,'resize',this.fnLoad);            return        }        var st = document.body.scrollTop || document.documentElement.scrollTop,            clientH = document.documentElement.clientHeight,            scrollArea = st + clientH;        for(var n=0;n<this.imgList.length;n++){            var offsetTop = this.imgList[n].getBoundingClientRect().top+st,                imgH = this.imgList[n].clientHeight;            if( scrollArea>(offsetTop-200)&&(imgH+offsetTop)>st ){                var _src = this.imgList[n].getAttribute(this.holderSrc);                this.imgList[n].setAttribute('src',_src);                                this.imgList.splice(n,1);//删除已经加载完的元素                n--;            }        } }

（四）给window对象，scroll与resize 添加此事件

（五）用户有可能快速拉滚动条，这样会导致事件的频繁触发，所以需要添加个setTimeout

bind:function(obj,fn){        var _this = this;        return function(){            if(_this.timer) clearTimeout(_this.timer);            _this.timer = setTimeout(function(){                fn.apply(obj,arguments);            },300);                    }}

完整代码：

function LazyScroll(opt){    this.init(opt);}LazyScroll.prototype = {    init:function(opt){        this.setOptions(opt);        this.load();        this.fnLoad = this.bind(this,this.load);        this.addHandler(window,'scroll',this.fnLoad);        this.addHandler(window,'resize',this.fnLoad);    },    setOptions:function(opt){        this.holderSrc = opt.holderSrc || 'data-src';        this.wrapId = opt.wrapId;        this.imgList = [];        this.timer = null;        var targets = null;        if (document.querySelectorAll) {            targets = document.querySelectorAll("#" + this.wrapId + " img")        } else {            targets = document.getElementById(this.wrapId).getElementsByTagName("img")        }        var n = 0,            len = targets.length;        // 把元素存到数组里        for(;n<len;n++){            if(targets[n].getAttribute(this.holderSrc)){                this.imgList.push(targets[n]);            }        }    },    load:function(){        // 全部加装，解除事件        if(this.imgList.length == 0){            this.removeHandler(window,'scroll',this.fnLoad);            this.removeHandler(window,'resize',this.fnLoad);            return        }        var st = document.body.scrollTop || document.documentElement.scrollTop,            clientH = document.documentElement.clientHeight,            scrollArea = st + clientH;        for(var n=0;n<this.imgList.length;n++){            var offsetTop = this.imgList[n].getBoundingClientRect().top+st,                imgH = this.imgList[n].clientHeight;            if( scrollArea>(offsetTop-200)&&(imgH+offsetTop)>st ){                var _src = this.imgList[n].getAttribute(this.holderSrc);                this.imgList[n].setAttribute('src',_src);                                this.imgList.splice(n,1);//删除已经加载完的元素                n--;            }        }    },    bind:function(obj,fn){        var _this = this;        return function(){            if(_this.timer) clearTimeout(_this.timer);            _this.timer = setTimeout(function(){                fn.apply(obj,arguments);            },300);                    }    },    addHandler:function(node,type,fn){        if(node.addEventListener){            node.addEventListener(type,fn,false);          }        else{            node.attachEvent('on'+type,function(){                fn.apply(node,arguments);             });        }    },    removeHandler: function(node, type, fn) {        if (node.addEventListener) {            node.removeEventListener(type, fn, false);        } else {            node.detachEvent("on" + type, fn);        }    }}

<body id="body">    <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/333/fff" alt="">    <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/f60/fff" alt="">    <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/259/fff" alt="">    <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/999/fff" alt="">    <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/4D3434/fff" alt="">    <img src="xxxx" width="990" height="90" data-src="http://dummyimage.com/990x90/344D3C/fff" alt="">    <script type="text/javascript" src="scrollLazy.js"></script>    <script type="text/javascript">        new LazyScroll({'wrapId':'body'});    </script></body>

0 0