lazyload-图片懒加载控件开发

原生js开发

1），prototype
html：

        <ul>
         <li>
          <a href="">
                 <span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">

                 </span>
          </a>
         </li>
           <li>
          <a href="">
                 <span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">

                 </span>
          </a>
         </li>
                  <li>
          <a href="">
                 <span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">

                 </span>
          </a>
         </li>
                  <li>
          <a href="">
                 <span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">

                 </span>
          </a>
         </li>
                  <li>
          <a href="">
                 <span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">

                 </span>
          </a>
         </li>
                  <li>
          <a href="">
                 <span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">

                 </span>
          </a>
         </li>

        </ul>

js:

  (function (name, definition) {
                if (typeof define === 'function') {
                        define(definition);
                } else {
                        this[name] = definition();
                }
        })('LazyLoad', function () {

             function LazyLoad(eleGroup){
                this.eleGroup=null;
                this.eleTop=null;
                this.eleHeight=null;
                this.screenHeight=null;
                this.visibleHeight=null;
                this.scrollHeight=null;
                this.scrolloverHeight=null;
                this.limitHeight=null;
              }
              LazyLoad.prototype.tagName=function(tagName){
                return document.getElementsByTagName(tagName);
              }
              LazyLoad.prototype.addEvent=function(obj,type,func){
                if(obj.addEventListener){
                        obj.addEventListener(type,func,false); 
                }else if(obj.attachEvent){
                        obj.attachEvent('on'+type,func);
                }               
              }
              LazyLoad.prototype.init=function(element){
                var that = this;
                that.eleGroup=that.tagName(element);
                that.screenHeight=document.documentElement.clientHeight;//可视区域高度
                that.scrolloverHeight=document.body.scrollTop;
                for(var i=0,j=that.eleGroup.length;i<j;i++){
                        if(that.eleGroup[i].offsetTop<=that.screenHeight && that.eleGroup[i].getAttribute('data-original')){ that.eleGroup[i].style.backgroundImage ="url("+that.eleGroup[i].getAttribute('data-original')+")"; }        
                }
              }
              LazyLoad.prototype.lazyLoad=function(tag){ var that = this; that.eleGroup = document.getElementsByTagName(tag); if(document.body.scrollTop == 0){ that.limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight; }else{ that.limitHeight=document.body.scrollTop+document.documentElement.clientHeight; } for(var i=0,j=that.eleGroup.length;i<j;i++){ if(that.eleGroup[i].offsetTop<=that.limitHeight && that.eleGroup[i].getAttribute('data-original')){ that.eleGroup[i].style.backgroundImage = "url("+that.eleGroup[i].getAttribute('data-original')+")"; } } } function extend(target, source) { for (var key in source) { target[key] = source[key]; } return target; } return LazyLoad; });

调用：

        var myLazyLoad = new LazyLoad();
        myLazyLoad.init('span');
        window.onscroll=function(){
                myLazyLoad.lazyLoad('span');
        }

2），oop
js：

        (function (name, definition) {
                if (typeof define === 'function') {
                        define(definition);
                } else {
                        this[name] = definition();
                }
        })('LazyLoad', function () {
                                /**
                                 * @LazyLoad this is for img-lazyload
                                 * @author huangzhao 2016/12/10
                                 */
                                var LazyLoad = {
                                        base:{
                                            eleGroup:null,      //      懒加载元素组
                                            eleTop:null,
                                            eleHeight:null,
                                            screenHeight:null,
                                            visibleHeight:null,
                                            scrollHeight:null,
                                            scrolloverHeight:null,
                                            limitHeight:null,
                                            oldOnscroll:null    
                                        },
                                        init:function(element){ //      初始化的时候加载图片
                                             this.base.eleGroup = this.tagName(element);
                                             this.base.screenHeight = document.documentElement.clientHeight;//可视区域
                                             this.base.scrolloverHeight = document.body.scrollTop;
                                                for(var i=0,j=this.base.eleGroup.length;i<j;i++){ if(this.base.eleGroup[i].offsetTop<=this.base.screenHeight && this.base.eleGroup[i].getAttribute('data-original')){ this.base.eleGroup[i].style.backgroundImage ="url("+this.base.eleGroup[i].getAttribute('data-original')+")"; } } console.log(this.base.eleGroup); }, tagName:function(tagName){// lazy的class return document.getElementsByClassName(tagName);  }, addEvent:function(obj,type,func){// 兼容事件 if(obj.addEventListener){ obj.addEventListener(type,func,false); }else if(obj.attachEvent){ obj.attachEvent('on'+type,func); } }, lazyLoad:function(){// 懒加载 if(document.body.scrollTop == 0){ this.base.limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight; }else{ this.base.limitHeight=document.body.scrollTop+document.documentElement.clientHeight; } for(var i=0,j=this.base.eleGroup.length;i<j;i++){ if(this.base.eleGroup[i].offsetTop<=this.base.limitHeight && this.base.eleGroup[i].getAttribute('data-original')){ this.base.eleGroup[i].style.backgroundImage = "url("+this.base.eleGroup[i].getAttribute('data-original')+")"; } } } } return LazyLoad;  });

调用：

                LazyLoad.init('lazy');
                window.onscroll = function(){
                     LazyLoad.lazyLoad();   
                }