[英]How to load in data only one time when user scrolls to the bottom of the page?
I have a page that dynamically loads in HTML from a PHP script that scrapes another site for image links when the user scrolls to the bottom of the page. 我有一个页面可以从PHP脚本动态加载HTML,当用户滚动到页面底部时,该脚本会抓取另一个站点进行图像链接。 The issue is that it takes awhile for the script to complete and the function that detects that user has scrolled to the bottom of the page gets triggered several times and the HTML is loaded in several times causing duplicate sets of images.
问题是脚本需要一段时间才能完成,并且检测到用户已滚动到页面底部的功能会被触发多次,并且HTML会多次加载,从而导致图像重复。 Is there a simple way to have javascript wait until the HTML is loaded before letting the function run again?
有没有简单的方法让javascript等到HTML加载后再让函数再次运行? The detection/load script looks like this:
检测/加载脚本如下所示:
$(window).scroll(function() {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//alert("at the bottom.");
$.post("function.php", function(data) {
$('#wrap').append(data);
});
}
});
Thanks! 谢谢!
var loadAgain = true;
$(window).scroll(function() {
if (loadAgain && $(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
loadAgain = false;
//alert("at the bottom.");
$.post("function.php", function(data) {
$('#wrap').append(data);
loadAgain = true;
});
}
});
Set boolean status to make sure that the event is not fired more than once until it is complete. 设置布尔状态以确保在事件完成之前不会触发多次该事件。 Like this:
像这样:
var loading = false;
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
if (!loading) {
loading = true;
$.post("function.php", function () {
loading = false;
})
}
}
Try this: 尝试这个:
var loadFinished = true;
$(window).scroll(function() {
if (loadFinished && ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)) {
//alert("at the bottom.");
loadFinished = false;
$.post("function.php", function(data) {
$('#wrap').append(data);
loadFinished = true;
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.