查看更多代码
   
lan988 级别:管理员    + 关注TA 支持(0) | 反对(0)原内容


<!DOCTYPE html>
<html>

<script language=javascript>
  <!--
  document.write('<div id=loadDiv style="padding-top: 100; padding-left: 100">'+
                 '页面正在载入，请等待<span id="loading"></span></div>');
  var setInterval1 = setInterval("loading.innerText += '.'", 300);
  var setInterval2 = setInterval("loading.innerText = ''", 15000);
  function window.onload()
  {
     hiddenDiv.style.display=""; //显示页面内容
     loadDiv.removeNode(true);
     clearInterval(setInterval1);
     clearInterval(setInterval2);
  }
  // -->
 </script>



<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>原生点击按钮加载更多(懒加载，每次加载N个)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        body {
            background: #333;
            font-size: 14px;
            font-family: "微软雅黑"
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        .hidden {
            display: none;
        }
        
        .jq22 {
            width: 50%;
            height: auto;
            margin: 0 auto;
            overflow: hidden;
            text-align: left;
            background: #fff;
            padding: 5px;
        }
        
        .jq22 ul.list {
            overflow: hidden;
        }
        
        .jq22 ul.list li {
            width: 100%;
            height: 50%;
            margin: 5px;
            float: left;
            overflow: hidden;
        }
        
        .jq22 ul.list li img {
            width: 100%;
            height: 180px;
        }
        
        .jq22 ul.list p {
            text-align: center;
            padding: 10px;
        }
        
        .jq22 .more {
            overflow: hidden;
            padding: 10px;
            text-align: center;
        }
        
        .jq22 .more a {
            display: block;
            width: 100%;
            padding: 8px 0;
            color: #fff;
            margin: 0 auto;
            background: #333;
            text-align: center;
            border-radius: 3px;
        }
        
        .jq22 .more a:hover {
            text-decoration: none;
            background: red;
            color: #fff;
        }
    </style>
</head>
<body>
    <!--代码部分begin-->
    <div class="jq22">
        <div class="hidden">
            <li>{LB_3g查看更多1}</li>
            <li>{LB_3g查看更多1}</li>
            <li>{LB_3g查看更多1}</li>
            <li>{LB_3g查看更多1}</li>
            <li>{LB_3g查看更多1}</li>
            <li>{LB_3g查看更多1}</li>
            <li>{LB_3g查看更多1}</li>
            <li>{LB_3g查看更多1}</li>
            <li>{LB_3g查看更多1}</li>
   
 
        </div>
        <ul class="list">数据加载中，请稍后...</ul>
        <div class="more"><a href="javascript:;" >加载更多</a></div>
    </div>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        var _content = []; //临时存储li循环内容
        var jq22 = {
            _default: 1, //默认显示图片个数
            _loading: 1, //每次点击按钮后加载的个数
            init: function() {
                var lis = $(".jq22 .hidden li");
                $(".jq22 ul.list").html("");
                for(var n = 0; n < jq22._default; n++) {
                    lis.eq(n).appendTo(".jq22 ul.list");
                }
                $(".jq22 ul.list img").each(function() {
                    $(this).attr('src', $(this).attr('realSrc'));
                })
                for(var i = jq22._default; i < lis.length; i++) {
                    _content.push(lis.eq(i));
                }
                $(".jq22 .hidden").html("");
            },
            loadMore: function() {
                var mLis = $(".jq22 ul.list li").length;
                for(var i = 0; i < jq22._loading; i++) {
                    var target = _content.shift();
                    if(!target) {
                        $('.jq22 .more').html("<p>全部加载完毕...</p>");
                        break;
                    }
                    $(".jq22 ul.list").append(target);
                    $(".jq22 ul.list img").eq(mLis + i).each(function() {
                        $(this).attr('src', $(this).attr('realSrc'));
                    });
                }
            }
        }
        jq22.init();
    </script>
    <!--代码部分end-->
</body>
</html>
回到顶部顶端 回到底部底部