jQuery在滚动中加载更多的数据
我只是想知道如何才能实现更多的滚动数据只有div.loading是可见的。
通常我们查找页面高度和滚动高度，看看是否需要加载更多的数据。 但下面的例子是那么复杂一点。
以下图像是完美的例子。 在下拉框中有两个加载div。 当用户滚动的内容，无论哪个可见，它应该开始加载更多的数据。
那么我怎样才能找出。加载div是否可见用户还没有？ 所以我可以开始只加载该div的数据。
在jQuery中，使用滚动function检查是否已经打到页面的底部。 一旦你打了，做一个ajax调用（你可以在这里显示一个加载图像，直到ajax响应）并获得下一组数据，将其附加到div。 当您再次向下滚动页面时，该函数被执行。
$(window).scroll(function() { if($(window).scrollTop() == $(document).height() - $(window).height()) { // ajax call get data from server and append to the div } }); 你有没有听说过jQuery Waypoint插件 。
下面是调用一个航点插件的简单方法，让页面加载更多的内容，一旦你滚动到底部：
$(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); });
这里是一个例子：
- 在滚动到底部，HTML元素是appendded。 这个追加机制只做了两次，最后追加了粉蓝色的button。
<!DOCTYPE html> <html> <head> <title>Demo: Lazy Loader</title> <script src="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>
