无限滚动Javascript错误，向上滚动时不加载
无限滚动Javascript错误，向上滚动时不加载
提问于 2018-07-24 03:35:21
这个javascript有什么问题吗？我只想在滚动条到达底部时加载数据，但现在如果滚动条加载了数据，而我不想要它
var busy = false;
var limit = 6;
var offset = 0;
function displayRecords(lim, off) {
$.ajax({
type: "GET",
async: false,
url: "load/article-2.php",
data: "limit=" + lim + "&offset=" + off,
cache: false,
beforeSend: function() {
$("#loader_message").html("").hide();
$('#loader_image').show();
},
success: function(html) {
$("#results").append(html);
$('#loader_image').hide();
if (html == 0) {
$("#loader_message").html('<br><span class="margintop20 padding10">No more records.</span>').show()
} else {
$("#loader_message").html('<br><span class="margintop20"><img src="file-server/loading.gif" width="24" height="24"> Loading please wait...</span>').show();
}
window.busy = false;
}
});
}
$(document).ready(function() {
if (busy == false) {
busy = true;
displayRecords(limit, offset);
}
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
busy = true;
offset = limit + offset;
setTimeout(function() { displayRecords(limit, offset); }, 500);
}
});
});这是我的php代码，如果你知道解决方案，请帮助我。
PHP代码
$limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 4; $offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;
$article = "SELECT SQL_CALC_FOUND_ROWS * FROM article WHERE 1 AND status ='publish' ORDER BY id DESC LIMIT $limit OFFSET $offset";
try {
$article1 = $pdo-> prepare($article);
$article1 ->execute();
$results = $article1->fetchAll();
} catch (Exception $ex) {
echo $ex->getMessage();
}if (count($results) > 0) {
foreach ($results as $data) {
include("../data/data.php");
echo "
<div class='col-md-2 padding5 aos-item' data-aos='fade-up'>
<div class='col-md-12 bgputih shadow padding10 hover-dark'>
<a href='blog/$url' title='$stitle'> <img class='w-100 img-fluid' src='$fileserver/article/$dateimage/$imagem' alt='$stitle'> </a>
<hr>
<div class='titlearticle'>
<a href='blog/$url' title='$stitle'>$title</a>
</div>
<div class='font10'>
";
include("../includes/bawah/sumber.php");
include("../includes/bawah/article.php");
echo"
</div>
</div>
</div>
";
}
}HTML代码
<div class='padding10 margintop-10 row' id="results"></div>
<div id="loader_image"><img src="<?php echo "$fileserver/loading.gif"; ?>" width="24" height="24"> Loading... please wait</div>
<div class="col-md-12" align="center" id="loader_message"></div>结论:我只想在滚动条到达底部时加载数据
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-24 04:01:31
只有当窗口滚动到底部时，才应该执行AJAX调用。
$(document).ready(function() {
//if (busy == false) { These lines will cause the AJAX call to be performed regardless of the window's scroll position and as such, they ought to be removed
//busy = true;
//displayRecords(limit, offset);
//}
$(window).scroll(function() {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight && !busy) {
//you're at the bottom of the page
busy = true;
offset = limit + offset;
setTimeout(function() { displayRecords(limit, offset); }, 500);
}
});
});JSFiddle：http://jsfiddle.net/jztnem4x/1/
Stack Overflow用户
发布于 2018-07-24 03:59:27
在这里，您甚至在检查$(window).scrollTop() + $(window).height() > $("#results").height() && !busy之前就调用了一次displayRecords
var busy = false;
if (busy == false) {
busy = true;
displayRecords(limit, offset);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51486080
复制相关文章
相似问题