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

图片加载完后，隐藏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!");

        }

    }

HTML5+javascript实现图片加载进度动画效果的更多相关文章

  1. 仿UC浏览器图片加载进度条

    前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下 进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如 ...

  2. Android 自定义View修炼-自定义加载进度动画XCLoadingImageView

    一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. ...

  3. Android酷炫加载进度动画

    概述 本自定义动画进度酷炫View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进 ...

  4. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  5. [Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  6. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  7. 【React Native】进阶指南之一（特定平台、图片加载、动画使用）

    一.特定平台代码 React Native提供了两种方法来区分平台: 使用Platform模块: 使用特定平台扩展名: 1.Platform模块 React Native提供了一个检测当前运行平台的模 ...

  8. 【JavaScript】图片加载由模糊变清晰 —— 图片优化

    开发过程中,一些图片的展示时,加载很慢很久,后来把图片缩放压成缩略图吧,速度是快了但是模糊不清,如何处理这样问题,下面就和大家分享一下自己的处理方法. 先让客户端加载像素小的缩略图: <img ...

  9. js实现页面图片加载进度条

    //html <div id="loading" class="loading"> <div class="load"&g ...

随机推荐

  1. Dynamic CRM 2013学习笔记（二十）字段改变事件的二种实现方法

    CRM里有二种方式实现字段change事件,一种是在form里,一种完全通过js来实现.本文介绍下二者的用途及区别. 1. Form里用法 这种方式估计其实也是添加一个js的function. 这种方 ...

  2. [MSSQL2008]Spatial Data in SQL Server 2008 - 根据经纬度计算两点间距离

    DECLARE @BJ GEOGRAPHY DECLARE @XT GEOGRAPHY /*     GET Latitude/Longitude FROM here:http://www.trave ...

  3. ybutton 高端大气上档次华丽的按钮特效

    小菜偶然在某网站中看到一款非常华丽的按钮特效,感觉十分有必要抄袭下来,以备日后使用. 简单描述一下按钮的效果:鼠标移到按钮上的时候,会出现灯光闪过的效果,非常的高端. 但遗憾的,这么牛逼的效果,仅仅兼 ...

  4. 通用对象池ObjectPool的一种简易设计和实现方案

    对象池,最简单直接的作用当然是通过池来减少创建和销毁对象次数,实现对象的缓存和复用.我们熟知的线程池.数据库连接池.TCP连接池等等都是非常典型的对象池. 一个基本的简易对象池的主要功能实现我认为应该 ...

  5. Django实现一个相片管理系统01

    有些日子没写笔记,O(∩_∩)O哈哈~实在是肚子没有墨水啦!今天不写数据结构啦!多怀念研究数据结构的日子啊! 可是呢!最近有个项目要搞图像管理方面的,具体内容就不说啦!我们今天来实现一个简单的相册管理 ...

  6. webpack学习之入门实例

    webpack:前端打包神器,目前活跃度甚至超过了gulp.grunt等,使用webpack打包,简单快速,下面记录下webpack环境搭建以及基本使用: 1.首先新建一个空白目录,用于项目根目录,比 ...

  7. javaweb学习总结(二十三)——jsp自定义标签开发入门

    一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 packag ...

  8. 更改Linux默认栈空间的大小

    有时候在Linux写C++程序处理大量的数据,程序内部需要分配很大的数组来存放一些数据,但有时候分配的数组太大的话运行时会出现段错误.这种情况可能是分配的数组大小超过了Linux系统的默认栈空间的大小 ...

  9. Ubuntu14.04.1 阿里apt源

    deb http://mirrors.aliyun.com/ubuntu/ trusty main restricted universe multiversedeb http://mirrors.a ...

  10. 店商互联（北京）科技发展有限公司DS365.com

    店商互联(DS365)是目前北京最为知名的社区便超O2O平台服务商,店商互联(DS365)通过自主研发的移动订货配送与网络营销服务平台,以移动互联网和大数据为技术支撑,为社区超市实体店提供手机订货.物 ...