Question

我试图模仿使用jquery加载多个列表项的ajax感觉。

最后，我想在点击“加载更多”按钮后显示10个项目，然后再显示10个项目。

我的代码：

<ul id="listings-container">
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
    <li>List item ...</li>
</ul>

<a class="button" href="#">Load More</a>

我试过了，simplest way to lazy load long <ul> with many <li>s

我试图通过点击而不是滚动来完成类似的工作。

有什么想法吗？

Answer 1

DEMO

<强>的jQuery

$(".button").on("click", function () {
    $("#listings-container").find("li:hidden:lt(10)").show();
});

<强> CSS

#listings-container li {
    display:none;
}

Answer 2

如果你正在使用引导程序选项卡面板和延迟加载，它适用于加载第一个标签页（默认有效）但不适用于何时加载单击其他选项卡后，除非滚动，否则不会加载图像。

以下是针对此问题的解决方法，只需添加以下javascript，您就可以了。逻辑很简单，单击选项卡时会触发滚动。

$(document).ready(function () {
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $(window).trigger('scroll');
    });
});

有关shown.bs.tab及其他功能的详情，请参阅以下链接：http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

希望这会有所帮助。

如何使用onclick（）延迟加载列表项？

2 个答案: