jquery防淘宝网图片动态加载代码_H5之家 - 中国HTML5教程资源分享第一站

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

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

$(".scrollloading").scrollloading();

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

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

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

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

四、scrollloading可选参数
scrollloading是个很简单很小的插件（无注释yui compressor min版仅508b），所以参数也很少，就一个，见下表：

参数默认释义
attr data-url 获取元素加载地址的属性名

就这些了。此插件只适用于页面默认滚动条的动态加载。对于内部div之类的滚动加载不支持。

*/
(function($) {
$.fn.scrollloading = function(options) {
  var defaults = {
   attr: "data-url"
  };
  var params = $.extend({}, defaults, options || {});
  params.cache = [];
  $(this).each(function() {
   var node = this.nodename.tolowercase(), url = $(this).attr(params["attr"]);
   if (!url) { return; }
   //重组
   var data = {
    obj: $(this),
    tag: node,
    url: url
   };
   params.cache.push(data);
  });

  //动态显示数据
  var loading = function() {
   var st = $(window).scrolltop(), sth = st + $(window).height();
   $.each(params.cache, function(i, data) {
    var o = data.obj, tag = data.tag, url = data.url;
    if (o) {
     post = o.position().top; posb = post + o.height();
     if ((post > st && post < sth) || (posb > st && posb < sth)) {
      //在浏览器窗口内
      if (tag === "img") {
       //图片，改变src
       o.attr("src", url);
      } else {
       o.load(url);
      }
      data.obj = null;
     }
    }
   });
   return false;
  };

  //事件触发
  //加载完毕即执行
  loading();
  //滚动执行
  $(window).bind("scroll", loading);
};
})(jquery);