HTML5+javascript實現圖片加載進度動畫效果

時間 2019-11-06

標籤 html5+javascript html javascript 實現圖片加載進度動畫效果欄目 HTML 简体版

原文原文鏈接

在網上找資料的時候，看到網上有圖片加載進度的效果，手癢就本身也寫了一個。javascript

圖片加載完後，隱藏loading效果。html

想看加載效果，請ctrel+F5強制刷新或者清理緩存。java

效果預覽：

代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5+javascript實現圖片加載進度動畫效果</title>
    <style>
        .loading {width:200px;height:200px;position:relative;margin:50px auto;border:1px solid #f90;border-radius:50%;}
        .dot {width:100%;;height:100%;animation:rond .8s infinite;-webkit-animation:rond .8s infinite;}
        .dot:after {width:10px;height:10px;position:absolute;top:-5px;left:90px;content:"";display:table;background-color:#f50;border-radius:50%;}
        .num {width:100%;height:100%;position:absolute;top:0;left:0;line-height:200px;text-align:center;font-size:20px;color:#f60;}
        @keyframes rond {
            0% {transform:rotate(0deg);}
            100% {transform:rotate(360deg);}
        }
        @-webkit-keyframes rond {
            0% {-webkit-transform:rotate(0deg);}
            100% {-webkit-transform:rotate(360deg);}
        }

        .photo {width:860px;margin:0 auto;display:none;text-align:center;}
        .photo img {width:200px;margin:0 5px;border:1px solid #ddd;border-radius:5px;}
    </style>
</head>
<body>




<div class="loading">
    <div class="dot"></div>
    <div class="num">0%</div>
</div>

<div class="photo"></div>


<script>

    var loading = document.querySelector(".loading"),
            num = document.querySelector(".num"),
            photo = document.querySelector(".photo"),
            imgs = [
                    "http://img4.cache.netease.com/photo/0001/2015-03-16/AKQU47JM00AP0001.jpg",
                    "http://img3.cache.netease.com/photo/0001/2015-03-16/AKQU47OJ00AP0001.jpg",
                    "http://img3.cache.netease.com/photo/0001/2015-03-16/AKQU482200AP0001.jpg",
                    "http://img6.cache.netease.com/photo/0001/2015-03-16/AKQU486800AP0001.jpg",
                    "http://img5.cache.netease.com/photo/0001/2015-03-16/AKQU48C000AP0001.jpg",
                    "http://img1.gtimg.com/12/1206/120657/12065709_1200x1000_0.jpg",
                    "http://img1.gtimg.com/12/1206/120657/12065712_1200x1000_0.jpg",
                    "http://img1.gtimg.com/12/1206/120657/12065713_1200x1000_0.jpg"
            ],
            len = imgs.length;

    for (var i=0; i<len; i++){
        var img = new Image();
        img.src = imgs[i];
        img.onload = function () {
            i--;
            num.innerHTML = ((len-i) * 100 / len) + "%";
            photo.innerHTML += "<img src='"+imgs[i]+"'>";
            if (i == 0){
                photo.style.display = "block";
                loading.style.display = "none";
            }
        };
    }

</script>
</body>
</html>

判斷頁面加載完

document.onreadystatechange = function () {
        if(document.readyState == "complete") {
            alert("OK!");
        }
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。