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

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

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

效果预览：

0%

代码如下：

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

.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;}

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

var img = new Image();

img.src = imgs[i];

img.onload = function () {

i--;

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

photo.innerHTML += "";

if (i == ){

photo.style.display = "block";

loading.style.display = "none";

}

};

}

判断页面加载完

document.onreadystatechange = function () {

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

alert("OK!");

}

}

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

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

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

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

Android酷炫加载进度动画

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

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

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

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

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

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

最终效果图: html结构: