lazyload-图片懒加载控件开发

最新推荐文章于 2021-05-16 00:12:28 发布

京都玩家

最新推荐文章于 2021-05-16 00:12:28 发布

阅读量502

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 懒加载控件开发文章标签： javascript 懒加载 js插件开发

本文链接：https://blog.youkuaiyun.com/hzaini89/article/details/53573423

javascript 同时被 2 个专栏收录

35 篇文章

订阅专栏

懒加载控件开发

2 篇文章

订阅专栏

本文介绍使用原生JavaScript实现图片懒加载的方法。通过监听滚动事件动态替换图片源，提高网页加载速度及用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生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();   
                }