jQuery 图片延迟加载的实现

最近c2c电子商务已经进入优化阶段 ，我负责前台大多数的功能的实现 ，其实商品列表页，由于会显示很多的商品 ，要是一次性都显示出来，会造成服务器很大的压力，此时我们可以考虑当用户滑动滚动条的时候 ，图片显示出现在屏幕范围之内的时候在加载进来，这样就可以减少服务器一次性过多请求带来的压力了

此时我们用到jquery.js相信大家都知道的

还有一个延迟加载的jquery插件  jquery.scrollLoading.js

下面像大家介绍一下它的用法 ，很简单

下面是jquery.scrollLoading.js的源码：

/*   * jquery.scrollLoading.js   * by 88181     * 2010-11-19 v1.0  */   (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;                       if (post < 10)                           post = o.offset().top;                       posb = post + o.height();                          if ((post > st && post < sth) || (posb > st && posb < sth)) {                           //在浏览器窗口内                               if (tag === "img") {                               //图片，改变src                                o.attr("src", url);                           } else if (tag == "iframe") {                               o.attr("src", url);                           } else if (tag == "span") {                                                         eval(url);                           }                           else {                               o.load(url);                           }                           data.obj = null;                       }                   }               });               return false;           };              //事件触发            //加载完毕即执行            loading();           //滚动执行            $(window).bind("scroll", loading);       };   })(jQuery);  

然后再你页面引用