技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > javascript > 正文

jQuery ScrollPagination滚动时会重复加载数据,求解决办法 ?

来源: 技术CTO 阅读:

jQuery ScrollPagination滚动时会重复加载数据,求解决办法 ?

把scrollpagination.js文件打开, 修改它的源码, 主要是这个地方在不断触发

  $.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){
$(obj).append(data); 
var objectsRendered = $(obj).children('[rel!=loaded]');

if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
  },
  dataType: 'html'
 });
 }
 
  };

新建 var loading = false;

  $.fn.scrollPagination.loadContent = function(obj, opts){
if(loading)return;//here
 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){
loading = false;//here
$(obj).append(data); 
var objectsRendered = $(obj).children('[rel!=loaded]');

if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
  },
  dataType: 'html'
 });
 }
 
  };

引用 1 楼 wz_307 的回复:
把scrollpagination.js文件打开, 修改它的源码, 主要是这个地方在不断触发

  $.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){
$(obj).append(data); 
var objectsRendered = $(obj).children('[rel!=loaded]');

if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
  },
  dataType: 'html'
 });
 }
 
  };

新建 var loading = false;

  $.fn.scrollPagination.loadContent = function(obj, opts){
if(loading)return;//here
 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){
loading = false;//here
$(obj).append(data); 
var objectsRendered = $(obj).children('[rel!=loaded]');

if (opts.afterLoad != null){
opts.afterLoad(objectsRendered);
}
  },
  dataType: 'html'
 });
 }
 
  };



试了下您贴出的代码。还是不行呢?
人家可能写错了,你看下修正下就行了;把第二行的:
if(loading)return;
改为
if(!loading)return;
就ok!
改了也不好使啊,哥们
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
//elementsLoaded 本次加载的一个 jquery封装的dom 对象
                          if(.....自己写判断条件){
                                 $(xxxxx).stopScrollPagination();  //停止加载
                        }
}

作者已经提供了你机会 当一次加载完后的回调  你自己来判断是否 停止加载

给你个例子

$(function(){
    var i = 0;
$('#content').scrollPagination({
'contentPage': 'test.html', // the url you are fetching the results
'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
 $('#loading').fadeOut();
            //this.contentPage = '';
            elementsLoaded.html(i++);
            if(i>10){
                $('#content').stopScrollPagination();
            }
});

// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
   
});

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^