一款滚动加载的插件scrollpagination.js-优快云博客

给大家分享一款滚动加载的JQuery插件 scrollpagination.js

插件代码：

 1 /*
 2 **    Anderson Ferminiano
 3 **    contato@andersonferminiano.com -- feel free to contact me for bugs or new implementations.
 4 **    jQuery ScrollPagination
 5 **    28th/March/2011
 6 **    http://andersonferminiano.com/jqueryscrollpagination/
 7 **    You may use this script for free, but keep my credits.
 8 **    Thank you.
 9 */
10 
11 (function( $ ){
12      
13          
14  $.fn.scrollPagination = function(options) {
15       
16         var opts = $.extend($.fn.scrollPagination.defaults, options);  
17         var target = opts.scrollTarget;
18         if (target == null){
19             target = obj; 
20          }
21         opts.scrollTarget = target;
22      
23         return this.each(function() {
24           $.fn.scrollPagination.init($(this), opts);
25         });
26 
27   };
28   
29   $.fn.stopScrollPagination = function(){
30       return this.each(function() {
31          $(this).attr('scrollPagination', 'disabled');
32       });
33       
34   };
35   
36   $.fn.scrollPagination.loadContent = function(obj, opts){
37      var target = opts.scrollTarget;
38      var mayLoadContent = $(target).scrollTop()+opts.heightOffset >= $(document).height() - $(target).height();
39      if (mayLoadContent){   
40          if (opts.beforeLoad != null){
41             opts.beforeLoad(); 
42          }
43          $(obj).children().attr('rel', 'loaded');
44          $.ajax({
45               type: 'Get',
46               url: opts.contentPage,
47               data: opts.contentData,
48               success: function(data){
49                 //$(obj).append(data); 
50                 var objectsRendered = $(obj).children('[rel!=loaded]');
51                 opts.loader(data);
52                 if (opts.afterLoad != null){
53                     opts.afterLoad(objectsRendered);    
54                 }
55               },
56               dataType: 'html'
57          });
58      }
59   };
60   
61   $.fn.scrollPagination.init = function(obj, opts){
62      var target = opts.scrollTarget;
63      $(obj).attr('scrollPagination', 'enabled');
64     
65      $(target).scroll(function(event){
66         if ($(obj).attr('scrollPagination') == 'enabled'){
67              $.fn.scrollPagination.loadContent(obj, opts);        
68         }
69         else {
70             event.stopPropagation();    
71         }
72      });
73      
74      $.fn.scrollPagination.loadContent(obj, opts);
75      
76  };
77     
78  $.fn.scrollPagination.defaults = {
79            'contentPage' : null,
80           'contentData' : {},
81          'beforeLoad': null,
82          'afterLoad': null    ,
83          'scrollTarget': null,
84          'heightOffset': 0,
85          'loader': function (data) { }
86  };    
87 })( jQuery );

View Code

使用方法：

 1  $(function () {
 2             $('#content').scrollPagination({
 3                 'contentPage': '/api/news/getnews',  //请求数据的地址
 4                 'contentData': {
 5                     id: '@Model.id',                 //相关参数
 6                     page: 2,
 7                     providerUserGuid: ""
 8                 },
 9                 'scrollTarget': $(window),
10                 'heightOffset': 50,
11                 'beforeLoad': function (elementsLoaded) { // before load, some function, maybe display a preloader div
12                     if (parseInt(this.contentData.page) >= parseInt("@Model.Pagination.TotalPages"))
13                         $('#content').stopScrollPagination();
14                 },
15                 'afterLoad': function (elementsLoaded) {
16                     var i = 0;
17                     $(elementsLoaded).fadeInWithDelay();
18                     if (parseInt(this.contentData.page) >= parseInt("@Model.TotalPages"))
19                         $('#content').stopScrollPagination();
20                     else {
21                         this.contentData.page = parseInt(this.contentData.page) + 1;
22                     }
23                 },
24                 loader: function (response) {
25                     var list = JSON.parse(response);
26                     console.log(list);
27                     if (list != null) {
28                         var html = $("#template").html();
29                         for (var i = 0; i < list.length; i++) {
30                             var str =html.replace("AA","BB"); //此处进行html标签的拼接操作
31                             $("#content").append(str);
32                         }
33                     }
34                 }
35             });
36             // code for fade in element by element
37             $.fn.fadeInWithDelay = function () {
38                 var delay = 0;
39                 return this.each(function () {
40                     $(this).delay(delay).animate({ opacity: 1 }, 200);
41                     delay += 100;
42                 });
43             };
44         });