图片滚动延时加载用js怎么实现

Question

不知道加载延时的原理是什么？想知道怎么写。

Answer 1

<img src="这里是代替的图片" data-img="这里是真正的图片地址" />定义一个方法，判断向下滑动滚动条的时候，图片的顶部是否达到了浏览器的底部。如果到了就让data-img里的图片地址替换src里的地址。

Answer 2

http://www.appelsiini.net/projects/lazyload

Answer 3

监听scroll事件，判断当前滚动条的位置是否达到容器的底部，如果是，继续请求数据，向容器追加数据

Answer 4

// 首页js
// 图片延时加载
var Lazy = {
     Img: null,
     getY: function(obj) {// 获取元素Y轴位置
          var curtop = 0;
          if (obj && obj.offsetParent) {
               while (obj.offsetParent) {
                    curtop += obj.offsetTop;
                    obj = obj.offsetParent;
               };
          } else if (obj && obj.y) curtop += obj.y;
          return curtop;
     },
     getX: function(obj) {// 获取元素Y轴位置
         var curtop = 0;
         if (obj && obj.offsetParent) {
              while (obj.offsetParent) {
                   curtop += obj.offsetLeft;
                   obj = obj.offsetParent;
              };
         } else if (obj && obj.x) curtop += obj.X;
         return curtop;
    },
     scrollY: function() {// 拖动条移动y轴距离
          var de = document.documentElement;
          return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop || 0;
     },
     scrollX: function() {// 拖动条移动y轴距离
         var de = document.documentElement;
         return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft || 0;
     },
     windowWidth: function() {// 屏幕宽
         var de = document.documentElement;
         return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
     },
     windowHeight: function() {// 屏幕高
          var de = document.documentElement;
          return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
     },     CurrentHeight: function() {
          return Lazy.scrollY() + Lazy.windowHeight();
     },
     CurrentWidth: function() {
         return Lazy.scrollX() + Lazy.windowWidth();
     },
     Load: function() {
          if (Lazy.Img == null) {
               Lazy.Init();
          }
          var currentHeight = Lazy.CurrentHeight();
          var currentWidth = Lazy.CurrentWidth();
          for (_index = 0; _index < Lazy.Img.length; _index++) {
              
               if($(Lazy.Img[_index]).attr("lazy")==undefined) {// lazy
// 标识图片是否已经加载
                    $(Lazy.Img[_index]).attr("lazy","n");
               }
               if($(Lazy.Img[_index]).attr("lazy")=="y") {
                    continue;
               }
              
               $(Lazy.Img[_index]).bind("error",function() {// 为图片绑定onError
                    if(this.id=="subject") {
                         $(this).attr("src",'');         
                    } else {
                         $(this).attr("src",'http://mobi.zhangyue.com/i/l/jpg/7296/0000000.jpg');    
                    }
                   
               })
               var imgTop = Lazy.getY(Lazy.Img[_index]);
               var imgLeft = Lazy.getX(Lazy.Img[_index]);
               if(imgLeft<currentWidth){
               if (imgTop < currentHeight) {
                    Lazy.Img[_index].src = Lazy.Img[_index].getAttribute("data-src");
                    $(Lazy.Img[_index]).attr("lazy","y");
               }
               }
          }
     },
     LoadX: function() {
         if (Lazy.Img == null) {
              Lazy.Init();
         }
         var currentWidth = Lazy.CurrentWidth();
         for (_index = 0; _index < Lazy.Img.length; _index++) {
             
              if($(Lazy.Img[_index]).attr("lazy")==undefined) {// lazy
// 标识图片是否已经加载
                   $(Lazy.Img[_index]).attr("lazy","n");
              }
              if($(Lazy.Img[_index]).attr("lazy")=="y") {
                   continue;
              }
             
              $(Lazy.Img[_index]).bind("error",function() {// 为图片绑定onError
                   if(this.id=="subject") {
                        $(this).attr("src",'');         
                   } else {
                        $(this).attr("src",'http://mobi.zhangyue.com/i/l/jpg/7296/0000000.jpg');    
                   }
                  
              })
              var imgTop = Lazy.getX(Lazy.Img[_index]);
              if (imgTop < currentWidth) {
                   Lazy.Img[_index].src = Lazy.Img[_index].getAttribute("data-src");
                   $(Lazy.Img[_index]).attr("lazy","y");
              }
         }
     },
     Init: function() {
          var allImg = document.getElementsByTagName("img");
          Lazy.Img = allImg;
     },     Test: function() {
          Lazy.Init();
          alert(Lazy.CurrentHeight());
     }
};自己可以适当的删减 里面有很多重复的东西

Answer 5

核心原理  在你需要的时候 才开始设置img 的 src