master

分支 (1)

管理

管理

master

preload_ordered
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片预加载之无序加载之QQ表情</title>
    <style>
        body,p,ul,li{
            padding: 0;
            margin: 0;
        }
        body{
            background: #eeeeee;
        }
        .box{
            margin: 150px 0 0 200px;
        }
        a{
            text-decoration: none;
            outline: none;
        }
        li{
            list-style-type: none;
        }
        #face-btn{
            display: block;
            background: url("QQ/face.png") no-repeat 0 -8px;
            text-indent: 42px;
            color:#333;
        }
        #face-btn:hover{
            background-position: 0 -38px;
        }
        .panel{
            display: none;
            width: 390px;
            padding: 2px;
            border: 1px solid #ccc;
            background-color: #ffffff;
        }
        .loading{
            text-align: center;
        }
        .list>li{
            display: inline-block;
            width: 24px;
            height: 24px;
            border: 1px solid #fff;
            margin-bottom: 5px;
            cursor: pointer;
        }
        .list>li:hover{
            border-color: #0066cc;
        }
    </style>
</head>
<body>
<div class="box">
    <a href="javascript:" id="face-btn">表情</a>
    <div class="panel">
        <p class="loading">表情加载中，请稍后...</p>
        <!--<ul class="list">-->
        <!--<li><img src="QQ/1.gif" alt=""></li>-->
        <!--<li><img src="QQ/2.gif" alt=""></li>-->
        <!--<li><img src="QQ/3.gif" alt=""></li>-->
        <!--<li><img src="QQ/4.gif" alt=""></li>-->
        <!--<li><img src="QQ/5.gif" alt=""></li>-->
        <!--<li><img src="QQ/6.gif" alt=""></li>-->
        <!--<li><img src="QQ/7.gif" alt=""></li>-->
        <!--<li><img src="QQ/8.gif" alt=""></li>-->
        <!--<li><img src="QQ/9.gif" alt=""></li>-->
        <!--<li><img src="QQ/10.gif" alt=""></li>-->
        <!--<li><img src="QQ/11.gif" alt=""></li>-->
        <!--<li><img src="QQ/12.gif" alt=""></li>-->
        <!--<li><img src="QQ/13.gif" alt=""></li>-->
        <!--<li><img src="QQ/14.gif" alt=""></li>-->
        <!--<li><img src="QQ/15.gif" alt=""></li>-->
        <!--<li><img src="QQ/16.gif" alt=""></li>-->
        <!--<li><img src="QQ/17.gif" alt=""></li>-->
        <!--<li><img src="QQ/18.gif" alt=""></li>-->
        <!--<li><img src="QQ/19.gif" alt=""></li>-->
        <!--<li><img src="QQ/20.gif" alt=""></li>-->
        <!--<li><img src="QQ/21.gif" alt=""></li>-->
        <!--<li><img src="QQ/22.gif" alt=""></li>-->
        <!--<li><img src="QQ/23.gif" alt=""></li>-->
        <!--<li><img src="QQ/24.gif" alt=""></li>-->
        <!--<li><img src="QQ/25.gif" alt=""></li>-->
        <!--<li><img src="QQ/26.gif" alt=""></li>-->
        <!--<li><img src="QQ/27.gif" alt=""></li>-->
        <!--<li><img src="QQ/28.gif" alt=""></li>-->
        <!--<li><img src="QQ/29.gif" alt=""></li>-->
        <!--<li><img src="QQ/30.gif" alt=""></li>-->
        <!--<li><img src="QQ/31.gif" alt=""></li>-->
        <!--<li><img src="QQ/32.gif" alt=""></li>-->
        <!--<li><img src="QQ/33.gif" alt=""></li>-->
        <!--<li><img src="QQ/34.gif" alt=""></li>-->
        <!--<li><img src="QQ/35.gif" alt=""></li>-->
        <!--<li><img src="QQ/36.gif" alt=""></li>-->
        <!--<li><img src="QQ/37.gif" alt=""></li>-->
        <!--<li><img src="QQ/38.gif" alt=""></li>-->
        <!--<li><img src="QQ/39.gif" alt=""></li>-->
        <!--<li><img src="QQ/40.gif" alt=""></li>-->
        <!--<li><img src="QQ/41.gif" alt=""></li>-->
        <!--<li><img src="QQ/42.gif" alt=""></li>-->
        <!--<li><img src="QQ/43.gif" alt=""></li>-->
        <!--<li><img src="QQ/44.gif" alt=""></li>-->
        <!--<li><img src="QQ/45.gif" alt=""></li>-->
        <!--<li><img src="QQ/46.gif" alt=""></li>-->
        <!--<li><img src="QQ/47.gif" alt=""></li>-->
        <!--<li><img src="QQ/48.gif" alt=""></li>-->
        <!--<li><img src="QQ/49.gif" alt=""></li>-->
        <!--<li><img src="QQ/50.gif" alt=""></li>-->
        <!--<li><img src="QQ/51.gif" alt=""></li>-->
        <!--<li><img src="QQ/52.gif" alt=""></li>-->
        <!--<li><img src="QQ/53.gif" alt=""></li>-->
        <!--<li><img src="QQ/54.gif" alt=""></li>-->
        <!--<li><img src="QQ/55.gif" alt=""></li>-->
        <!--<li><img src="QQ/56.gif" alt=""></li>-->
        <!--<li><img src="QQ/57.gif" alt=""></li>-->
        <!--<li><img src="QQ/58.gif" alt=""></li>-->
        <!--<li><img src="QQ/59.gif" alt=""></li>-->
        <!--<li><img src="QQ/60.gif" alt=""></li>-->
        <!--<li><img src="QQ/61.gif" alt=""></li>-->
        <!--<li><img src="QQ/62.gif" alt=""></li>-->
        <!--<li><img src="QQ/63.gif" alt=""></li>-->
        <!--<li><img src="QQ/64.gif" alt=""></li>-->
        <!--<li><img src="QQ/65.gif" alt=""></li>-->
        <!--<li><img src="QQ/66.gif" alt=""></li>-->
        <!--<li><img src="QQ/67.gif" alt=""></li>-->
        <!--<li><img src="QQ/68.gif" alt=""></li>-->
        <!--<li><img src="QQ/69.gif" alt=""></li>-->
        <!--<li><img src="QQ/70.gif" alt=""></li>-->
        <!--<li><img src="QQ/71.gif" alt=""></li>-->
        <!--<li><img src="QQ/72.gif" alt=""></li>-->
        <!--<li><img src="QQ/73.gif" alt=""></li>-->
        <!--<li><img src="QQ/74.gif" alt=""></li>-->
        <!--<li><img src="QQ/75.gif" alt=""></li>-->
        <!--</ul>-->
    </div>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/preload.js"></script>
<script>
    var $btn = $("#face-btn"),
        $panel = $(".panel"),
        imgs = [];
    for (var i = 0;i < 75;i++){
        imgs[i] = "QQ/"+ (i+1) + ".gif";
    }
    var len = imgs.length;
    $btn.on("click",function (e) {
        e.stopPropagation();
        $panel.show();
        $.preload(imgs,{
            all:function () {
                var html = '';
                html += '<ul class="list">';
                for(var i = 0;i<len;i++){
                    html += '<li><img src="'+imgs[i]+'" alt=""></li>'
                }
                html +='</ul>';
                setTimeout(function () {
                    $panel.html(html);
                },1000);
            }
        })
    });
    $(document).on("click",function () {
        $panel.hide();
    })
</script>
</body>
</html>