js页面中实现加载更多功能

　　分页-如何实现加载更多功能，目前的在很多网站上使用的加载更多功能中，使用最多的是iscroll.js实现的上拉加载更多、下拉刷新功能。但是iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。

　　最简单的就是给一个加载更多的按钮，实现假分页加载更多，也就是页面上是全部的数据，只是按照页面显示要求，自己规定显示部分范围，其余隐藏。如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，就会显示加载完毕。

1. 加载时显示“正在加载……”
2. 数据太多想初次加载部分数据，在底部加上“加载更多”按钮
3. 直到没有更多数据了，就会显示加载完毕。

　　其中 class="loading" 中的loading为自己随便命名，在这里以在js页面上通过c标签的foreach 方法循环遍历企业名字 来做演示

<div class="loading">
                    <div class="hidden">
                        <div class="horisontalpadding">
                            <ul class="products product-thumb-info-list">

                             <--想要实现加载的内容显示在下面即可,同时注意使用li标签-->
                                <c:forEach var="company" items="${companys}">
                                    <li class="product searchproduct" style="width: 30%;"><a
                                            <div
                                                style="width: 350px; height: 30px; border: 3px solid #CCC; text-align: center; border-radius: 40                                                   px;">
                                                <h4 class="company.name" style="color: #030303">${company.name}</h4>
                                            </div>
                                    </a></li>
                                </c:forEach>



                            </ul>
                        </div>
                    </div>
                    <ul class="list">数据加载中，请稍后...
                    </ul>
                    <div class="space30"></div>
                    <div style="display: none;" data-bind="visible: isProductsLoading">
                        <div id="pager_loading"></div>
                    </div>
                    <div class="container">
                        <div class="alert alert-info text-center">
                            <a href="javascript:;" onClick="loading.loadMore();"><div
                                    class="more">加载更多企业</div></a>
                        </div>
                    </div>
                </div>

下面显示script代码部分

<script>
        var _content = []; //临时存储li循环内容
        var loading = {
            _default : 6, //默认显示图片个数
            _loading : 6, //每次点击按钮后加载的个数
            init : function() {
                var lis = $(".loading .hidden li");
                $(".loading ul.list").html("");
                for (var n = 0; n < loading._default; n++) {
                    lis.eq(n).appendTo(".loading ul.list");
                }
                $(".loading ul.list img").each(function() {
                    $(this).attr('src', $(this).attr('realSrc'));
                })
                for (var i = loading._default; i < lis.length; i++) {
                    _content.push(lis.eq(i));
                }
                $(".loading .hidden").html("");
            },
            loadMore : function() {
                var mLis = $(".loading ul.list li").length;
                for (var i = 0; i < loading._loading; i++) {
                    var target = _content.shift();
                    if (!target) {
                        $('.loading .more').html("<p>全部加载完毕...</p>");
                        break;
                    }
                    $(".loading ul.list").append(target);
                    $(".loading ul.list img").eq(mLis + i).each(function() {
                        $(this).attr('src', $(this).attr('realSrc'));
                    });
                }
            }
        }
        loading.init();
    </script>

　　这种是最简单的方法不需要引入任何插件，直接在js页面上添加script代码即可。

　　这是我第一次使用博客与大家分享我的代码，请各位前辈不吝赐教，多多指点，有什么问题都可以给我指出，不胜感激。