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

1521人阅读 评论(1) 收藏 举报

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 = [
                    "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!");
        }
    }
查看评论

js效果 图片加载进度实时显示

var l=0;var imgs;var sum=0;var imgs=new Array();function chk(){  l--;  document.getElementById("aa")...
  • Reasoncool
  • Reasoncool
  • 2007-10-29 08:59:00
  • 1447

js实现页面加载动画

//获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document....
  • rentian1
  • rentian1
  • 2017-08-18 08:12:13
  • 1054

img.onload 实现图片预加载方法

例子: 1111 function loadImage(url,callback) { var im...
  • kongjiea
  • kongjiea
  • 2014-04-22 14:41:32
  • 50748

html5动态加载图片和加载视频

这两在做一个动态加载图片的东西,有点类似QQ发说说里面附带图片的那种,经过测试可以任意添加、删除,然后该删除的位置被后一位自动填充,还有一个bug,就是最后一个图片的控件没做处理,删掉最后一个就会导致...
  • jsniitqwh
  • jsniitqwh
  • 2016-03-04 14:07:38
  • 4751

图片的动画效果(淡出,淡入,显示,隐藏等....外加左右移动)(HTML5)

先来张图: 来一张效果图,其他就不一一展示了,代码都在下面: 代码如下: html> html lang="en"> head> meta charset="UTF-8"> ...
  • qq_40090482
  • qq_40090482
  • 2017-10-10 18:55:47
  • 632

8款效果精美的 jQuery 加载动画和进度条插件

加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高。在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用...
  • qq_27966627
  • qq_27966627
  • 2016-04-19 13:37:50
  • 1945

12种炫酷html5 svg加载loading动画特效

这是一款使用html5 svg制作的加载loading动画特效插件。该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片。关于在页面中使用SVG的方法可...
  • delmarks
  • delmarks
  • 2015-01-30 12:38:02
  • 4952

HTML5实现动画三种方式

HTML5实现动画三种方式
  • sinat_32434539
  • sinat_32434539
  • 2017-09-08 12:41:34
  • 789

【随记 css+js 开发】带进度条和数字的动画加载页开发

为了提升用户体验,在程序执行复杂操作时,往往会加入各种加载动画或者进度条提示用户,如果配上数字,感觉会更好,下面给大家分享两种制作带进度条和数字的加载动画的方法。 先来看看实现效果:方法一:基于旋转的...
  • dengpeng0419
  • dengpeng0419
  • 2016-12-01 22:40:23
  • 1240

『HTML5游戏开发』加载图片和显示进度条

本篇将帮助大家学会游戏中用html5设置进度条。 游戏中第一眼看到的就应该是进度条,一般进度条是把图片加载进来,然后随着加载图片的数量画出相应的进度。那么html5究竟是如何加载图片的呢?接下来由我...
  • TheEra_Wpyh
  • TheEra_Wpyh
  • 2013-03-16 16:31:26
  • 6657
    个人资料
    等级:
    访问量: 1万+
    积分: 342
    排名: 23万+
    文章分类
    最新评论