无限滚动导致随机数字1打印在实际数据之前
问题描述:
我能够让滚动本身工作,我有它加载滚动上的下5个项目,但在下一个5出现一个数字1插入上方结果,并一直重复,直到结束。一旦到达终点,滚动继续打印数字1,就好像它卡在滚动循环中一样。无限滚动导致随机数字1打印在实际数据之前
另一个需要注意的奇怪点是,如果滚动过快,记录会重复,就像查询运行两次一样。
scroll.php以下代码:
<div class="col-md-12" id="post-data">
<?php
require('config.php');
$sql = "SELECT postID, postTitle, postDesc FROM blog_posts ORDER BY postID DESC LIMIT 5";
$result = $conn->query($sql);
?>
<?php include('data.php'); ?>
</div>
<div class="ajax-load text-center" style="display:none">
<p><img src="loader.gif"> Loading More post</p>
</div>
<script type="text/javascript">
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
var last_id = $(".post-id:last").attr("id");
loadMoreData(last_id);
}
});
function loadMoreData(last_id){
$.ajax(
{
url: '/loadMoreData.php?last_id=' + last_id,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
$('.ajax-load').hide();
$("#post-data").append(data);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
});
}
</script>
data.php下面代码:
<?php
while($post = $result->fetch_assoc()){
?>
<div class="post-id" id="<?php echo $post['postID']; ?>">
<h3><a href=""><?php echo $post['postTitle']; ?></a></h3>
<p><?php echo $post['postDesc']; ?></p>
<div class="text-right">
<button class="btn btn-success">Read More</button>
</div>
<hr style="margin-top:5px;">
</div>
<?php
}
?>
loadMoreData.php下面代码:
<?php
require('config.php');
$sql = "SELECT postID, postTitle, postDesc FROM blog_posts
WHERE postID < '".$_GET['last_id']."' ORDER BY postID DESC LIMIT 5";
$result = $conn->query($sql);
$json = include('data.php');
echo json_encode($json);
?>
答
change loadMoreData.php as bwlow。从去年
<?php
require('config.php');
$sql = "SELECT postID, postTitle, postDesc FROM blog_posts
WHERE postID < '".$_GET['last_id']."' ORDER BY postID DESC LIMIT 5";
$result = $conn->query($sql);
include('data.php');
?>
更新
删除echo json_encode($json);
对于停止滚动,直到最后Ajax调用完成。你可以使用标志变量
<script type="text/javascript">
loaded = true; //<-----Initialize
$(window).scroll(function() {
if(($(window).scrollTop() == $(document).height() - $(window).height()) && loaded) { //<-----Add in condition
var last_id = $(".post-id:last").attr("id");
loadMoreData(last_id);
}
});
function loadMoreData(last_id){
loaded = false; //<----- change it to false as soon as start ajax call
$.ajax(
{
url: '/loadMoreData.php?last_id=' + last_id,
type: "get",
beforeSend: function()
{
$('.ajax-load').show();
}
})
.done(function(data)
{
$('.ajax-load').hide();
$("#post-data").append(data);
loaded = true; //<--- again change it to true
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('server not responding...');
loaded = true;
});
}
</script>
Jheez就这么简单!谢谢你......任何关于如何在最终产品加载后停止滚动的疯狂线索?即在页面底部 –
检查更新@NickSinghSahota –