js实现点击加载更多效果

当后端直接把所有数据都给你调出来了，但是又需要做点击加载更多效果。
html代码：

<div class="main">
            <ul class="showMore">
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
                <li class="news_item"></li>
            </ul>
            <div class="news_list_btn" style="visibility: hidden;"></div>
</div>

js代码：

//封装一个函数-点击加载更多
        function showMore(button, ul, showNumber, loadNumber) {
            var list = showNumber;
            var ul = $(ul);
            var sum = ul.find("li").hide().size();
            if (sum > list) {
                $(button).css("visibility", "visible")
                ul.find("li:lt(" + list + ")").show()
            }
            $(button).on("click", function() {
                list += loadNumber;
                ul.find("li:lt(" + list + ")").slideDown();
                if (list >= sum) {
                    $(this).css("visibility", "hidden");
                }
            });
        }
        /*
        button:点击按钮
        ul：列表ul
        showNumber:第一次展示的个数
        loadNumber:点击一次加载的个数
        */
        showMore(".news_list_btn", ".showMore", 7, 4);