类似懒加载的js功能

Posted 2020-10-23 一粒小米

 1 <!-- 显示15条数据 -->
 2 <ul class="list" pagesize="15">
 3     <li>
 4         <div class="">
 5             <img v-bind:src=""  />
 6         </div>
 7     </li>
 8 　　<li>...</li>
 9 　　<li>...</li>
10 　　....
11 </ul>

 

1，先在ul显示设置15条的数据，pagesize="15";然后插入下面的jq代码即可，不过这貌似不是懒加载的样子，而是隐藏了后面的列表，点击再才又加载多15条数据。

 

 1 <!-- 显示更多 -->
 2 <script type="text/javascript">
 3     (function () {
 4         var showMoreNChildren = function ($children, n) {
 5             //显示某jquery元素下的前n个隐藏的子元素
 6             var $hiddenChildren = $children.filter(":hidden");
 7             var cnt = $hiddenChildren.length;
 8             for (var i = 0; i < n && i < cnt ; i++) {
 9                 $hiddenChildren.eq(i).show();
10             }
11             return cnt - n;//返回还剩余的隐藏子元素的数量
12         }
13      
14         $.showMore = function (selector) {
15             if (selector == undefined) { selector = ".list" }
16             //对页中现有的class=list的元素，在之后添加显示更多条，并绑定点击行为
17             $(selector).each(function () {
18                 var pagesize = $(this).attr("pagesize") || 10;
19                 var $children = $(this).children();
20                 if ($children.length > pagesize) {
21                     for (var i = pagesize; i < $children.length; i++) {
22                         $children.eq(i).hide();
23                     }
24      
25                     $("<button class=‘more‘ >显示更多 >>></button>").insertAfter($(this)).click(function () {
26                         if (showMoreNChildren($children, pagesize) <= 0) {
27                             //如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
28                             $(this).hide();
29                         };
30                     });
31                 }
32             });
33         }
34     })();
35     
36     //调用显示更多插件。参数是标准的 jquery 选择符 
37     $.showMore("list");
38 </script>