如何使用onclick()延迟加载列表项?

时间:2014-03-18 18:55:28

标签: javascript jquery html css

我试图模仿使用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

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

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

DEMO

<强>的jQuery

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

<强> CSS

#listings-container li {
    display:none;
}

答案 1 :(得分:1)

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

以下是针对此问题的解决方法,只需添加以下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

希望这会有所帮助。