jQuery在滚动上加载更多数据
Bas*_*sit 136 javascript ajax jquery scroll
我只是想知道如果div.loading可见,我如何才能在滚动上实现更多数据.
通常我们会查找页面高度和滚动高度,以查看是否需要加载更多数据.但是下面的例子比那复杂一点.
下图是完美的例子.在下拉框中有两个.loading div.当用户滚动内容时,无论哪个可见,它都应该开始为其加载更多数据.
那么如何才能找出.din div是否对用户可见？所以我可以开始只加载该div的数据.
dee*_*ssn 272
在jQuery中,检查是否使用滚动功能点击了页面底部.一旦你点击它,做一个ajax调用(你可以在这里显示一个加载图像直到ajax响应)并获得下一组数据,将它附加到div.当您再次向下滚动页面时,将执行此功能.
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call get data from server and append to the div
}
});
- 我以类似的方式处理这个问题,因为你总是在页面底部有任意的东西(导航),而你真的想在你触底之前加载.所以我的内部函数是:`var end = $("#BottomThing").offset().top; var viewEnd = $(window).scrollTop()+ $(window).height(); var distance = end - viewEnd; 如果(距离<300)//加载 (31认同)
- 这个解决方案很棒,也是最简单的;)你可以使用ajax调用中的以下行改进这段代码:`new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop() - 1);`第一行以很好的方式附加元素,第二行确保你的函数永远不会停留在页面底部. (4认同)
- 如果有人想知道用户是否已经滚动到底部,他可以使用这个if if条件显示在这里:if($(window).scrollTop()+ $(window).height()== $(document ).height()){console.log('滚动到底部!'); } (4认同)
- 这个答案不是我在问题中提出的问题. (4认同)
- 瑞安贝茨有一个很好的插曲:http://railscasts.com/episodes/114-endless-page.还有一个修订版本,但您可能需要订阅. (2认同)
def*_*u1t 84
你听说过jQuery Waypoint插件吗？
下面是调用waypoints插件并让页面在滚动到达底部时加载更多内容的简单方法:
$(document).ready(function() {
var $loading = $("<div class='loading'><p>Loading more items…</p></div>"),
$footer = $('footer'),
opts = {
offset: '100%'
};
$footer.waypoint(function(event, direction) {
$footer.waypoint('remove');
$('body').append($loading);
$.get($('.more a').attr('href'), function(data) {
var $data = $(data);
$('#container').append($data.find('.article'));
$loading.detach();
$('.more').replaceWith($data.find('.more'));
$footer.waypoint(opts);
});
}, opts);
});
- 有没有机会通过jsfiddle进行演示？ (8认同)
- 好建议,但最糟糕的js插件航路点..浪费了我很多时间....下面的答案更快更快 (4认同)
- 您认为下面哪个答案最好？ (2认同)
The*_*lal 12
如果不是所有文档都滚动，例如，当您在文档中滚动时div，则上述解决方案在没有调整的情况下将无法工作。下面是如何检查 div 的滚动条是否已经触底：
$('#someScrollingDiv').on('scroll', function() {
let div = $(this).get(0);
if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
// do the lazy loading here
}
});
- 多谢兄弟！这真的对我有帮助:) (2认同)
- 迄今为止最好的答案，谢谢你的救星 (2认同)
这是一个例子:
- 在滚动到底部时,会显示html元素.这个附加机制只进行了两次,然后最后添加了一个带有粉蓝色的按钮.
<!DOCTYPE html>
<html>
<head>
<title>Demo: Lazy Loader</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
#myScroll {
border: 1px solid #999;
}
p {
border: 1px solid #ccc;
padding: 50px;
text-align: center;
}
.loading {
color: red;
}
.dynamic {
background-color:#ccc;
color:#000;
}
</style>
<script>
var counter=0;
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
appendData();
}
});
function appendData() {
var html = '';
for (i = 0; i < 10; i++) {
html += '<p class="dynamic">Dynamic Data : This is test data.<br />Next line.</p>';
}
$('#myScroll').append(html);
counter++;
if(counter==2)
$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
}
</script>
</head>
<body>
<div id="myScroll">
<p>
Contents will load here!!!.<br />
</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
<p >This is test data.<br />Next line.</p>
</div>
</body>
</html>我建议使用更多 Math.ceil 以避免某些屏幕上出现错误。
因为在几个不同的屏幕上它并不绝对准确，
我意识到当我console.log时。
console.log($(window).scrollTop()); //5659.20123123890
和
console.log$(document).height() - $(window).height()); // 5660
所以我认为我们应该编辑你的代码
$(window).scroll(function() {
if(Math.ceil($(window).scrollTop())
== Math.ceil(($(document).height() - $(window).height()))) {
// ajax call get data from server and append to the div
}
});
或者允许在滚动到底部之前从服务器加载数据。
if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)) {
// Load data
}
当窗口放大到> 100％时，这个问题的可接受答案与chrome有关。这是chrome开发人员推荐的代码，作为我在同一个错误中提出的一部分。
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()){
//Your code here
}
});
以供参考：
改进@deepakssn 的答案。您可能希望在我们实际滚动到底部之前加载一些数据。
var scrollLoad = true;
$(window).scroll(function(){
if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=800){
// fetch data when we are 800px above the document end
scrollLoad = false;
}
});
[varscrollLoad] 用于阻止调用，直到附加一个新数据。
希望这可以帮助。