HTML5+javascript实现图片加载进度动画效果

HTML5+javascript实现图片加载进度动画效果

 在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个。

图片加载完后,隐藏loading效果。

想看加载效果,请ctrel+F5强制刷新或者清理缓存。

 

 

效果预览:

 

 

 

 

代码如下:

复制代码
<!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 = [
                    "https://i-blog.csdnimg.cn/blog_migrate/ce5ac8a3b2f8d316713187bac8138cb9.jpeg",
                    "https://i-blog.csdnimg.cn/blog_migrate/ec3e1e45efbcdda7efc5e8ec5fe6be3a.jpeg",
                    "https://i-blog.csdnimg.cn/blog_migrate/6e1e138373afaa852d295b957a9e09e3.jpeg",
                    "https://i-blog.csdnimg.cn/blog_migrate/2103aa8aa1b28ecd7eb54a0f9a6237ff.jpeg",
                    "https://i-blog.csdnimg.cn/blog_migrate/23d0e9cec9d7998b4e18345c893efefe.jpeg",
                    "https://i-blog.csdnimg.cn/blog_migrate/db9fb8dccf004b18cdd396ccb7ed9c79.jpeg",
                    "https://i-blog.csdnimg.cn/blog_migrate/f008a383cf0fb5401e94efc5509d6bd6.jpeg",
                    "https://i-blog.csdnimg.cn/blog_migrate/3d03892dc2737eeae2f73f0f9116e09d.jpeg"
            ],
            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!");
        }
    }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值