无限滚动重复ajax
Infinite scroll duplicate ajax
有时当我刷新页面并向右滚动页面加载时,它会重复条目。我使用以下代码:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
//** My deals pagination starts**//
var my_track_load = 0; //total loaded record group(s)
var my_loading = false; //to prevents multipal ajax loads
var my_total_groups = <? php echo $my_total_groups; ?> ; //total record group(s)
$('#load_deals').load("ajax/autoload_process.php", {
'group_no': my_track_load,
'my_deals': 'my_deals'
}, function (data) {
++my_track_load;
}); //load first group
$(window).scroll(function () { //detect page scroll
// if($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
//{
if (my_track_load <= my_total_groups && my_loading == false) //there's more data to load
{
my_loading = true; //prevent further ajax my_loading
$('.animation_image').show(); //show my_loading image
//load data from the server using a HTTP POST request
$.post('ajax/autoload_process.php', {
'group_no': my_track_load,
'my_deals': 'my_deals'
}, function (data) {
$("#load_deals").append(data); //append received data into the element
//hide my_loading image
$('.animation_image').hide(); //hide my_loading image once data is received
my_track_load++; //loaded group increment
my_loading = false;
}).fail(function (xhr, ajaxOptions, thrownError) { //any errors?
alert(thrownError); //alert with HTTP error
$('.animation_image').hide(); //hide my_loading image
my_loading = false;
});
}
// }
});
//** My deals pagination Ends**//
//** All deals pagination starts**//
var track_load = 0; //total loaded record group(s)
var loading = false; //to prevents multiple ajax loads
var total_groups = <? php echo $total_groups; ?> ; //total record group(s)
var country = '<?php echo $country; ?>';
var state = '<?php echo $state; ?>';
$('#results').load("ajax/autoload_process.php", {
'group_no': track_load,
'country': country,
'state': state,
'all_deals': 'all_deals'
}, function (data) {
++track_load;
}); //load first group
$(window).scroll(function () { //detect page scroll
// if($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
//{
if (track_load <= total_groups && loading == false) //there's more data to load
{
loading = true; //prevent further ajax loading
$('.animation_image').show(); //show loading image
//load data from the server using a HTTP POST request
$.post('ajax/autoload_process.php', {
'group_no': track_load,
'country': country,
'state': state,
'all_deals': 'all_deals'
}, function (data) {
$("#results").append(data); //append received data into the element
//hide loading image
$('.animation_image').hide(); //hide loading image once data is received
track_load++; //loaded group increment
loading = false;
}).fail(function (xhr, ajaxOptions, thrownError) { //any errors?
alert(thrownError); //alert with HTTP error
$('.animation_image').hide(); //hide loading image
loading = false;
});
}
// }
});
});
我不知道它是否对你有帮助,但下面的代码可能会引导你。
function FeedLoader(my_track_load,my_total_groups){
$.ajax({
url:'ajax/autoload_process.php',
type:"POST",
dataType:"text",
data:'my_track_load='+my_track_load+'&my_total_groups='+my_total_groups,
cache: false,
async: true,
success: function(data){
if(my_track_load == 0)
{
$(""#load_deals"").html(data);
}
else
{
$(""#load_deals"").append(data);
}
},
complete: function(){
$(window).on("scroll",function(){
var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 500);
var AtBottom = ($(window).scrollTop() + $(window).height() == $(document).height());
if (closeToBottom || AtBottom)
{
if( my_track_load < total_m_group )
{
my_track_load++;
FeedLoader(my_track_load,total_m_group);
}
}
});
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
}); }
$(document).ready(function () {
FeedLoader('0','<?php echo $my_total_groups;?>'); });
相关文章:
- jquery/ajax无限滚动事件
- ajax显示隐藏滚动到最重要的问题
- 我如何发送AJAX请求的内容是通过无限滚动加载的
- AJAX加载和页面滚动
- 引导表单向导 - 防止在提交 ajax 响应的每个页面表单出现错误时滚动到下一步
- 通过 ajax 使用自定义滚动条向元素添加内容
- jQuery Ajax 无限滚动读取 PHP
- 当用户滚动到底部时,Ajax函数会多次触发
- 无限ajax滚动未加载javascript
- 使用KnockoutJS和单个AJAX调用进行无限滚动
- 如何使滚动上的 ajax 负载达到大约 90%,而不是滚动条到达底部
- 滚动查看 ajax 页面
- 如何绑定和解除绑定无限ajax滚动,以便其他jQuery正常工作
- 对infinate ajax滚动在检索其他帖子时的工作方式感到困惑
- 无限ajax滚动不工作在Django
- 无限ajax滚动与灯箱
- 银色条纹+无限Ajax滚动:无左不断被添加到页面
- Ajax滚动加载帖子项目运行功能,但不加载内容
- 在 PHP 中使用 ajax 滚动到窗口底部的分页
- 对javascript中的ajax滚动内容进行排序