jQuery加载关于滚动的更多数据。

Question

jQuery加载关于滚动的更多数据。

我只是想知道，只有在div.load可见的情况下，我才能在滚动中实现更多的数据。

通常我们会查找页面高度和滚动高度，以查看是否需要加载更多数据。但是下面的例子并不复杂。

下面的图像就是一个很好的例子。在下拉框上有两个。装载div。当用户滚动内容时，无论哪个是可见的，它都应该开始为其加载更多的数据。

那么，我如何才能发现.load div是否对用户是可见的呢？所以我只能开始为这个div加载数据。

Answer 1

在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     }});

Answer 2

你听说过jQuery Waypoint插件.下面是调用waypoint插件并在滚动页底部加载更多内容的简单方法：$(document).ready(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$loading&nbsp;=&nbsp;$("<div&nbsp;class='loading'><p>Loading&nbsp;more&nbsp;items&hellip;</p></div>"), &nbsp;&nbsp;&nbsp;&nbsp;$footer&nbsp;=&nbsp;$('footer'), &nbsp;&nbsp;&nbsp;&nbsp;opts&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset:&nbsp;'100%' &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;$footer.waypoint(function(event,&nbsp;direction)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$footer.waypoint('remove'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('body').append($loading); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$.get($('.more&nbsp;a').attr('href'),&nbsp;function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$data&nbsp;=&nbsp;$(data); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#container').append($data.find('.article')); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$loading.detach(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.more').replaceWith($data.find('.more')); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$footer.waypoint(opts); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;opts);});