1. 程式人生 > >類似懶加載的js功能

類似懶加載的js功能

-- cto urn ++ blog 行為 this -s 綁定

 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>

類似懶加載的js功能