zoukankan      html  css  js  c++  java
  • 类似懒加载的js功能

     1 <!-- 显示15条数据 -->
     2 <ul class="list" pagesize="15">
     3     <li>
     4         <div class="">
     5             <img v-bind:src="" alt="" />
     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>
  • 相关阅读:
    Spark中RDD、DataFrame和DataSet的区别
    如何为Spark应用程序分配--num-executors,--execuor-cores和--executor-memory
    一些常用的Spark SQL调优技巧
    使用sendmail命令发送附件
    spark.sql.shuffle.partitions 和 spark.default.parallelism 的区别
    Spark Shuffle
    [Spark学习] Spark RDD详解
    将时间戳(timestamp)转换为MongoDB中的ObjectId
    如何使用pig的AvroStorage存储array/map类型
    关于Avro中的Unions类型
  • 原文地址:https://www.cnblogs.com/pyspang/p/8430997.html
Copyright © 2011-2022 走看看