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

时间：2022-10-07 04:38:42

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

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

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

效果预览：

 
0%
 

代码如下：

<!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:%;}

        .dot {width:%;;height:%;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:%;}

        .num {width:%;height:%;position:absolute;top:;left:;line-height:200px;text-align:center;font-size:20px;color:#f60;}

        @keyframes rond {

            % {transform:rotate(0deg);}

            % {transform:rotate(360deg);}

        }

        @-webkit-keyframes rond {

            % {-webkit-transform:rotate(0deg);}

            % {-webkit-transform:rotate(360deg);}

        }

        .photo {width:860px;margin: auto;display:none;text-align:center;}

        .photo img {width:200px;margin: 5px;border:1px solid #ddd;border-radius:5px;}

    </style>

</head>

<body>

<div class="loading">

    <div class="dot"></div>

    <div class="num">%</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=; i<len; i++){

        var img = new Image();

        img.src = imgs[i];

        img.onload = function () {

            i--;

            num.innerHTML = ((len-i) *  / len) + "%";

            photo.innerHTML += "<img src='"+imgs[i]+"'>";

            if (i == ){

                photo.style.display = "block";

                loading.style.display = "none";

            }

        };

    }

</script>

</body>

</html>

判断页面加载完

document.onreadystatechange = function () {

        if(document.readyState == "complete") {

            alert("OK!");

        }

    }

相关文章