关闭

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

1355人阅读 评论(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!");
        }
    }
0
0
查看评论

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

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

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

这两在做一个动态加载图片的东西,有点类似QQ发说说里面附带图片的那种,经过测试可以任意添加、删除,然后该删除的位置被后一位自动填充,还有一个bug,就是最后一个图片的控件没做处理,删掉最后一个就会导致添加不能成功。加载本地视频(google浏览器)和加载手机视频(android和ios)经过测试,在...
  • jsniitqwh
  • jsniitqwh
  • 2016-03-04 14:07
  • 4413

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

例子: 1111 function loadImage(url,callback) { var img =new Image(); img.onload =function(){ ...
  • kongjiea
  • kongjiea
  • 2014-04-22 14:41
  • 48193

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

  • 2013-03-16 15:52
  • 1.85MB
  • 下载

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

本篇将帮助大家学会游戏中用html5设置进度条。 游戏中第一眼看到的就应该是进度条,一般进度条是把图片加载进来,然后随着加载图片的数量画出相应的进度。那么html5究竟是如何加载图片的呢?接下来由我一步步地为大家揭晓。 初始画面 window.onload = function...
  • TheEra_Wpyh
  • TheEra_Wpyh
  • 2013-03-16 16:31
  • 6602

Android用回调函数得到网络图片,实现加载图片进度

本文的主要目的是:把访问网络这一步骤,封装在一个接口里,然后在主函数回调它,即可做到完成访问网络下载图片,这样使我们不用每访问一次网络就写一大堆代码,只要把回调的接口new出来就OK了,下面贴代码 :package com.example.test05;import android.view.Vie...
  • yaochangliang159
  • yaochangliang159
  • 2015-08-31 22:40
  • 1101

Android图片加载框架最全解析,实现带进度的Glide图片加载功能

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/78357251扩展目标首先来确立一下功能扩展的目标。虽说Glide本身就已经十分强大了,但是有一个功能却长期以来都不支持,那就是监听下载进度功能。 我们都知道,使用Glide来加载一...
  • u010667468
  • u010667468
  • 2017-12-10 22:14
  • 132

HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用;一般用于下载任务,删除大量任务,网页加载等;如果有使用html5为手机布局的,也可以用于手机中~ 效果图: 1、html结构:
  • lmj623565791
  • lmj623565791
  • 2014-06-26 12:06
  • 47227

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

HTML5+javascript实现图片加载进度动画效果  在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个。 图片加载完后,隐藏loading效果。 想看加载效果,请ctrel+F5强制刷新或者清理缓存。     ...
  • ljmkmnkl
  • ljmkmnkl
  • 2016-09-08 17:23
  • 1355

多种风格的图片加载进度条(Fresco、UIL、Glided多种风格加载)

好了,不说废话 首先,你必须先创建一个CircleProgress或者RectanglePropress或者其他 CircleProgress progress = new CircleProgress.Builder(). ...
  • a358583166
  • a358583166
  • 2017-03-31 16:52
  • 473
    个人资料
    • 访问:12859次
    • 积分:307
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:27篇
    • 译文:0篇
    • 评论:3条
    最新评论