轻量级jquery scrollLoading 延迟加载使用

scrollLoading使用

不管怎样，首先调用jQuery库文件，还有jquery.scrollLoading.js，您可以直接在页面的某处添上如下的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>  <script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js"></script> 

 

此插件的方法名就是scrollLoading，所以，直接：包装器.scrollLoading();就可以实现滚动加载效果了，简单的吧。如下：

$(".scrollLoading").scrollLoading(); 

 

表示所有class为scrollLoading的元素绑定了滚动加载的方法。
当然，不可能真的就如此简单，我们还需要做点小动作的。元素默认是不加载的，那么真正的加载地址显然要预先在元素上放置的，例如新浪微博默认把头像地址绑在了一个自定义的”dynamic-src”属性上，见下图：

在HTML5中，以data-开头的自定义属性都是合法的，且地址可以是图片，页面等。所以，我设定了绑定地址的自定义属性为”data-url”，此属性值设为真实的图片（或页面）地址就可以了。例如下面：

<div class="scrollLoading" data-url="loaded.html">加载中...</div> 

 

会在滚动时加载名为loaded.html的页面，并自动替换里面的内容。

对于常用的图片，还有一点小问题，就是其默认的src图片地址。其src地址不能是真实的图片地址（否则会直接一次性全部加载），也不能是空地址或是坏地址，否则IE浏览器下会出现很惊悚的红叉叉。。我的做法是默认链接的是一个1px * 1px的gif透明图片（大小很小），同时可以透出后面加载中gif动画图片，当滚动加载的时候直接把此gif图片替换掉。于是，对于图片，可能就有类似下面的代码：

<img class="scrollLoading" data-url="http://image.zhangxinxu.com/image/study/head/s180/1.jpeg" src="http://www.zhangxinxu.com/study/image/pixel.gif" width="180" height="180" style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;" /> 

 

四、scrollLoading可选参数

scrollLoading是个很简单很小的插件（无注释YUI compressor min版仅508B），所以参数也很少，就一个（已更新），见下表：

参数

默认

释义

attr

data-url

获取元素加载地址的属性名

就这些了。此插件只适用于页面默认滚动条的动态加载。对于内部div之类的滚动加载不支持。更新于2012年9月27日：
根据部分同行的要求，现增加两个可选参数，一个为container表示容器，另一个为callback表示回调。具体参见下表：

参数

默认

释义

attr

data-url

获取元素加载地址的属性名

container

$(window)

滚动的容器。默认为$(window)，也就是默认的网页滚动。

callback

$.noop

回调。元素动态加载完毕后执行的回调函数。其中回调函数的上下文this就是当前DOM元素。注意：如果无法获取元素加载地址，则不执行动态加载，但是会触发回调。在某些需求下，您可以缺省url值，仅仅触发回调。

特意做了个container和callback参数使用的demo，您可以狠狠地点击这里：普通div元素中的动态滚动加载demo

新demo中绑定JavaScript代码如下：

$(".scrollLoading").scrollLoading({      container: $("#zxxMainCon"),      callback: function() {          this.style.border = "3px solid #a0b3d6";       }  });

 

 

/*!
 * jquery.scrollLoading.js 
 * 2010-11-19 v1.0
 * 2012-01-13 v1.1 偏移值计算修改 position → offset
 * 2012-09-25 v1.2 增加滚动容器参数, 回调参数
*/
(function($) {
 $.fn.scrollLoading = function(options) {
  var defaults = {
   attr: "data-url",
   container: $(window),
   callback: $.noop
  };
  var params = $.extend({}, defaults, options || {});
  params.cache = [];
  $(this).each(function() {
   var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
   //重组
   var data = {
    obj: $(this),
    tag: node,
    url: url
   };
   params.cache.push(data);
  });
  
  var callback = function(call) {
   if ($.isFunction(params.callback)) {
    params.callback.call(call.get(0));
   }
  };
  //动态显示数据
  var loading = function() {
   
   var contHeight = params.container.height();
   if ($(window).get(0) === window) {
    contop = $(window).scrollTop();
   } else {
    contop = params.container.offset().top;
   }  
   
   $.each(params.cache, function(i, data) {
    var o = data.obj, tag = data.tag, url = data.url, post, posb;

    if (o) {
     post = o.offset().top - contop, post + o.height();
 
     if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {
      if (url) {
       //在浏览器窗口内
       if (tag === "img") {
        //图片，改变src
        callback(o.attr("src", url));  
       } else {
        o.load(url, {}, function() {
         callback(o);
        });
       }  
      } else {
       // 无地址，直接触发回调
       callback(o);
      }
      data.obj = null; 
     }
    }
   }); 
  };
  
  //事件触发
  //加载完毕即执行
  loading();
  //滚动执行
  params.container.bind("scroll", loading);
 };
})(jQuery);

用法：

页面引用 
1.<script type="text/javascript" src="jquery.js"></script>  
2.<script type="text/javascript" src="jquery.scrollLoading.js"></script>  
 
在加载图片的地方可以这样
 
1.<img data-url="http://******.com/167_167.jpg"  class="lm" align="absmiddle"  width="167" height="167"/>  
然后再加一段js就可以了 
1.$(function () {  
 2.    $(".lm").scrollLoading();  
 3.});  
这样就搞定 屏幕中出现这个图片的时候，才会进行加载，是不是很方便， 

同事你也可以一次返回一个列表 ，比如你想一行几个图片的在屏幕的时候 ，这样你可以ajax放回一个list
 
 1.<div class="searchdiv" data-url="http://****.com/xx/imgList.action">  
 2.                    <img src="http://****.com/16x16.gif"  
 3.                        alt="" /></div>  
 4.js：  
 5.   $(function () {  
 6.                        $(".searchdiv").scrollLoading();  
 7.                    });  

页面加载完成前DIV显示loading图标，当该DIV的一部分在浏览器的可视范围内时，开始使用ajax加载data-url属性对应的HTML内容,正确返回后填充到该DIV