jQuery 滑动滚动条延迟加载图片(附带相册展示插件)

文章目录

今天为大家推荐一款滑动插件 scrollpagination.js
很多产品展示、文章列表、微博列表展示都用到了这个东西，页面首次加载显示一部分列表信息，当滚动条滑动到一定位置时，就会触发请求后台加载新的数据，通过这种方式来替代传统的分页模式，同时也带来比较友好的用户体验。

• 源码展示

(function ($) {
 
    $.fn.scrollPagination = function (options) {
        var opts = $.extend($.fn.scrollPagination.defaults, options || {});
        var target = opts.scrollTarget;
        if (target == null) {
            target = obj;
        }
        opts.scrollTarget = target;
        return this.each(function () {
            $.fn.scrollPagination.init($(this), opts);
        });
 
    };
 
    $.fn.stopScrollPagination = function () {
        return this.each(function () {
            $(this).attr('scrollPagination', 'disabled');
        });
 
    };
 
    $.fn.scrollPagination.loadContent = function (obj, opts) {
        var target = opts.scrollTarget;
        var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height();
        if (mayLoadContent) {
            if (opts.beforeLoad != null) {
                opts.beforeLoad();
 
            }
            $(obj).children().attr('rel', 'loaded');
            $.ajax({
                type: 'POST',
                url: opts.contentPage,
                data: opts.contentData,
                success: function (data) {
                    opts.loader(data);
                    var objectsRendered = $(obj).children('[rel!=loaded]');
 
                    if (opts.afterLoad != null) {
                        opts.afterLoad(objectsRendered);
                    }
                },
                dataType: opts.dataType
            })
 
        }
 
    };
 
    $.fn.scrollPagination.init = function (obj, opts) {
        var target = opts.scrollTarget;
        $(obj).attr('scrollPagination', 'enabled');
 
        $(target).scroll(function (event) {
            if ($(obj).attr('scrollPagination') == 'enabled') {
                $.fn.scrollPagination.loadContent(obj, opts);
            }
            else {
                event.stopPropagation();
            }
        });
 
        $.fn.scrollPagination.loadContent(obj, opts);
 
    };
 
    $.fn.scrollPagination.defaults = {
        'contentPage': null,
        'contentData': {},
        'beforeLoad': null,
        'afterLoad': null,
        'scrollTarget': null,
        'heightOffset': 0,
        'dataType': null,
        'loader': function (data) { }
    };
})(jQuery);

• 下面我来介绍下在具体例子里的使用，看上面的源码会发现 这个插件使用会有一些默认参数
  1. contentPage：请求的内容的地址
  2. contentData：请求内容所要传递的数据
  3. beforeLoad：加载之前执行的操作
  4. afterLoad：加载之后执行的操作
  5. scrollTarget：滚动条滑动所指的对象，这里一般设为$(window)，也可以是自己定义的其他容器
  6. heightOffset：滚动条距底部的高度，当滑动达到这个高度时，就会触发再次请求新的数据
  7. dataType：传输的数据格式，和ajax的dataType一致
  8. loader：数据请求回来的回调方法与ajax里的success一直

• 接下来我们看看在前端的调用

  $(function () {
          $('#content').scrollPagination({
              'contentPage': 'Handler_GetMore.ashx',
              'contentData': {},
              'scrollTarget': $(window),
              'heightOffset': 10,
              'beforeLoad': function () {
                  $('#loadingImg').fadeIn();
                  $('#loadingImg').html('<img src="images/bigLoader.gif" alt="正在加载，请稍后..." />');
              },
              'afterLoad': function (elementsLoaded) {
   
                  $('#loadingImg').fadeOut();
                  var i = 0;
                  $(elementsLoaded).fadeInWithDelay();
                  if ($('#content').children().size() >= 99) {
                      $('#nomoreresults').fadeIn();
                      $('#nomoreresults').html('<img src="images/bigLoader.gif" alt="正在加载，请稍后..." />');
                      $('#content').stopScrollPagination();
                  }
              },
              'dataType': 'json',
              'loader': function (data) {
                  $.each(data.root, function (idx, item) {
                      $('#content').append("<li><a href='" + item.b_img + "'><img src='" + item.s_img + "' alt='image' /><span class='photo'></span></a></li>");
                  });
              }
          });
   
          $.fn.fadeInWithDelay = function () {
              var delay = 0;
              return this.each(function () {
                  $(this).delay(delay).animate({ opacity: 1 }, 200);
                  delay += 100;
              });
          };
      });

注：上面代码中有个fadeInWithDelay 是个过度动画效果.
插件的介绍到此结束.

---

亮点：另外在我写的demo的例子里面还集成了2款相册插件

####相册插件一
top_up-min 简单的相册插件，但如果图片过大，无法放大到原图

####相册插件二
picbox （强烈推荐），这款插件支持放大到原图，支持拖拽与QQ空间相册类似！

Demo下载地址：Demo