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

Question

I am trying to mimic an ajax feel to loading multiple list items using jquery.

Ultimately i would like to show 10 items and then 10 more after clicking "Load More" button.

My code:

<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>

I tried this, simplest way to lazy load long <ul> with many <li>s

I am trying to accomplish similar with click rather than scroll.

Any ideas?

Answer 1

DEMO

jQuery

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

CSS

#listings-container li {
    display:none;
}

Answer 2

Just in case if you're using bootstrap tab panel and lazy loading , it works well for loading the first tab (default active) but not for when you clicked to other tabs, images will not load unless you scroll.

Here is a workaround for this issue, just add the below javascript and you'll be fine. The logic is simple, when the tab is clicked, trigger a scroll.

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

For more information about shown.bs.tab and other functions please refer to this link: http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp

Hope this helps.