您的位置:首页 > Web前端 > JavaScript

js滚动加载图片

2014-05-23 10:35 85 查看
原理:
1.图片的真实地址不用src,使用其他属性调用,src采用loading图

   <img class="scrollLoading" data-src="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' + i + '.jpg" src="loading.gif"  />

2.滚动时,按顺序加载图片,将data-src数据赋值给src,显示图片。加载到该图片时,当图片距顶部的距离<body的高度+滚动条的top时该图片显示出来

3.关键点,获取元素在页面的位置和高度

   getPosition : function(obj) {//获取元素在页面里的位置和宽高

      var top = 0,

          left = 0,

          width = obj.offsetWidth,

          height = obj.offsetHeight;

      while(obj.offsetParent){

          top += obj.offsetTop;

          left += obj.offsetLeft;

          obj = obj.offsetParent;

      }

      return {"top":top,"left":left,"width":width,"height":height};

   }高手写的,不是很懂

参考网址:http://www.jb51.net/article/39009.htm

4.插件:http://download.csdn.net/download/zhaoweitco/2453420

  插件的使用http://www.jb51.net/article/46985.htm

原理参考:1.http://www.jb51.net/article/39009.htm

                    2.http://www.jb51.net/article/39896.htm

                   

  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息