js页面中实现加载更多功能
分页-如何实现加载更多功能，目前的在很多网站上使用的加载更多功能中，使用最多的是iscrolljs本身并没有集成加载更多的功能，需要进行自行扩展。
最简单的就是给一个加载更多的按钮，实现假分页加载更多，也就是页面上是全部的数据，只是按照页面显示要求，自己规定显示部分范围，其余隐藏。如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，就会显示加载完毕。
- 加载时显示“正在加载……”
- 数据太多想初次加载部分数据，在底部加上“加载更多”按钮
- 直到没有更多数据了，就会显示加载完毕。
其中?class="loading" 中的loading为自己随便命名，在这里以在js页面上通过c标签的foreach 方法循环遍历企业名字 来做演示
1 <div class="loading"> 2 <div class="hidden"> 3 <div class="horisontalpadding"> 4 <ul class="products product-thumb-info-list"> 5 <--想要实现加载的内容显示在下面即可,同时注意使用li标签--> 6 <c:forEach var="pany" items="${panys}"> 7 <li class="product searchproduct" style="width: 30%;"><a 8 <div 9 style="width: 350px; height: 30px; border: 3px solid #CCC; text-align: center; border-radius: 40 px;"> 10 <h4 class="panyname}</h4> 11 </div> 12 </a></li> 13 </c:forEach> 14 </ul> 15 </div> 16 </div> 17 <ul class="list">数据加载中，请稍后loadMore();"><div 26 class="more">加载更多企业</div></a> 27 </div> 28 </div> 29 </div>
下面显示script代码部分
1 <script> 2 var _content = []; //临时存储li循环内容 3 var loading = { 4 _default : 6, //默认显示图片个数 5 _loading : 6, //每次点击按钮后加载的个数 6 init : function() { 7 var lis = $("hidden li"); 8 $("list")_default; n++) { 10 lisappendTo("list"); 11 } 12 $("list img")attr('src', $(this)_default; i < lispush(lisloading html(""); 19 }, 20 loadMore : function() { 21 var mLis = $("list li")_loading; i++) { 23 var target = _contentloading html("<p>全部加载完毕loading ulappend(target); 29 $("list img")each(function() { 30 $(this)attr('realSrc')); 31 }); 32 } 33 } 34 } 35 loading.init(); 36 </script>
这种是最简单的方法不需要引入任何插件，直接在js页面上添加script代码即可。
这是我第一次使用博客与大家分享我的代码，请各位前辈不吝赐教，多多指点，有什么问题都可以给我指出，不胜感激。
?
