類似懶加載的js功能
阿新 • • 發佈:2018-02-08
-- 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功能