jQuery 如何为 HTML/CSS 页面添加加载更多按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8352372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add load more button for a HTML/CSS page?
提问by Saiful Islam
I want to make a single page website and it will have huge content. Suppose it has 1000 photos on it. I don't want people to wait 5 minutes to load my page. So I wanna add LOAD MORE button on the page bottom.
我想做一个单页网站，它会有大量的内容。假设它有 1000 张照片。我不希望人们等待 5 分钟来加载我的页面。所以我想在页面底部添加加载更多按钮。
How to do that with HTML/CSS/JS?
如何使用 HTML/CSS/JS 做到这一点？
回答by Purag
You could set all the divs' to display:none;at first and then use jQuery to show the first 10 (or however many you wish to show):
您可以首先将所有divs' 设置display:none;为，然后使用 jQuery 显示前 10 个（或您希望显示的多个）：
$(function(){
$("div").slice(0, 10).show(); // select the first ten
$("#load").click(function(e){ // click event for load more
e.preventDefault();
$("div:hidden").slice(0, 10).show(); // select next 10 hidden divs and show them
if($("div:hidden").length == 0){ // check if any hidden divs still exist
alert("No more divs"); // alert if there are none left
}
});
});
例子。
This saves you the trouble of including an entire plugin when what you want can be achieved in a few lines of code.
当您想要的东西可以在几行代码中实现时，这可以为您省去包含整个插件的麻烦。
回答by Starx
The closest i can get reading your question, you want the effect which google and facebook uses nowadays to load posts.
我能读到你的问题最接近的是，你想要谷歌和 facebook 现在用来加载帖子的效果。
Visit infinite-scroll.comThey have your answer.
访问infinite-scroll.com他们有你的答案。
回答by Ashwin Shahi
myList id the id of my ul tag.
myList id 我的 ul 标签的 id。
x=9 gives 9 views from first only further you can load again at a time 3 more will be loaded.
x=9 从第一个开始给出 9 个视图，您可以再次加载 3 个。
$j(document).ready(function () {
size_li = $j("#myList li").size();
x=9;
$j('#myList li:lt('+x+')').show();
$j('#loadMore').click(function () {
x= (x+3 <= size_li) ? x+3 : size_li;
$j('#myList li:lt('+x+')').show();
});
});
回答by Ya Zhuang
not sure if you have a backend server or something like that, but anyway, you can try some javascript template engine like jQuery Template, mustacheetc.
不确定您是否有后端服务器或类似的东西，但无论如何，您可以尝试一些 javascript 模板引擎，如jQuery Template、mustache等。
and load the images dynamically by js would be a solution :)
并通过 js 动态加载图像将是一个解决方案:)
