html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个。
图片加载完后,隐藏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结构:
< ...
【React Native】进阶指南之一(特定平台、图片加载、动画使用)
一.特定平台代码 React Native提供了两种方法来区分平台: 使用Platform模块: 使用特定平台扩展名: 1.Platform模块 React Native提供了一个检测当前运行平台的模 ...
【JavaScript】图片加载由模糊变清晰 —— 图片优化
开发过程中,一些图片的展示时,加载很慢很久,后来把图片缩放压成缩略图吧,速度是快了但是模糊不清,如何处理这样问题,下面就和大家分享一下自己的处理方法. 先让客户端加载像素小的缩略图:
js实现页面图片加载进度条
//html
随机推荐
jms的俩种模式
package com.jiangchong.job; import java.util.Date; import javax.jms.Connection; import javax.jms.Con ...
设置SQLServer数据库中某些表为只读的多种方法
原文:设置SQLServer数据库中某些表为只读的多种方法 翻译自:http://www.mssqltips.com/sqlservertip/2711/different-ways-to-make- ...
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过可编程的对象模型,JavaScrip ...
Win7 64位下安装64bit MS SQL Server2005时安装不了Reporting Services的处理办法
警告截图: 解决办法: 在cmd窗口运行如下脚本即可: "cscript %SYSTEMDRIVE%\inetpub\adminscripts\adsutil.vbs SET W3SVC/A ...
es索引管理工具-curator
elasticsearch-curator 是官方收购的开源社区周边产品,用来管理es的索引和快照. 官方文档:https://www.elastic.co/guide/en/elasticsear ...
git pull总是要输入账号和密码
如果你用git从远程pull拉取代码,每次都要输入密码,那么执行下面命令即可 git config --global credential.helper store 这个命令则是在你的本地生成一个账号 ...
【PAT】B1059 C语言竞赛(20 分)
这个题也是个逻辑问题 此题用我这种方式很复杂,应该用map 用两个分别储存成绩,已领过奖的人, #include #include int a ...
AutoCompleteTextView和自定义的CursorAdapter
用雅虎天气接口和AutoCompleteTextView开发天气应用(1) 2014/03/20 | 分类: ANDROID, 开发 | 2 条评论 | 标签: 天气, 安卓开发 分享到:5 jQue ...
sql server作业管理查看/进程管理查看命令
一.作业管理 (1) select * from msdb.dbo.sysjobhistory 可以查看作业的历史记录 (2) select * from msdb.dbo.sysjobs 查 ...
html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果相关推荐
- js 写html加载中的效果,基于javascript实现页面加载loading效果
本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下 效果图: 正在载入 正在载入首页,请稍候. var line = "||" var ...
- html怎样把图片放进画布中,HTML5 canvas操作图片
1.canvas操作图像的能力 canvas更有意思的一项特性就是图像操作能力.可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等.浏览器支持的任意格式的外部图片都可以使用, ...
- html数字动画效果,原生JavaScript代码实现数字更新的动画效果
前言 在很多数据统计类型网站的首页,经常会看到数据在动态的更新,而且会以动画的效果呈现. 今天这篇文章我们就来看看这个效果如何实现吧. 文中的代码已经放到github上了,感兴趣的同学可以自取.htt ...
- java加载js_[Java教程]javascript如何动态加载js文件
[Java教程]javascript如何动态加载js文件 0 2016-01-01 00:00:52 javascript如何动态加载js文件: 有时候我们需要根据需要动态加载js文件,本章节就简单介 ...
- python 酷炫效果_六种酷炫Python运行进度条效果的实现代码
六种酷炫Python运行进度条效果的实现代码,进度条,代码,六种,效果,酷炫 六种酷炫Python运行进度条效果的实现代码 易采站长站,站长之家为您整理了六种酷炫Python运行进度条效果的实现代码的 ...
- html 穿越星空效果,html5 canvas绚丽3d星空飞行穿梭动画特效
简要教程 这是一款使用 html5 canvas和 jQuery 制作的绚丽3d星空飞行穿梭动画特效.该3d星空飞行特效模拟了飞船在宇宙星空中快速穿梭的动画场景,效果非常逼真. HTML结构 HTML ...
- html5 图片粒子效果,Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图片是通过im ...
- html5刮彩效果,HTML5 Canvas炫酷彩虹色波浪线动画特效代码
效果图 JS源码 var c = document.querySelector('.c') , w , h , ctx = c.getContext('2d') , x0, y0, x, y, t = ...
- html 空间扭曲效果,HTML5 Canvas点阵空间塌缩交互动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas = document.querySelector("canvas" ...
最新文章
- 2道面试题:输入URL按回车HTTP2
- 在Facebook做产品是一种什么样的体验?
- notepad++显示所有字符的方法(针对隐藏的回车换行空格)
- 安卓机更新系统会卡吗_【ios13更新】最全的ios13系统的攻略,最大一次更新,升级绝对不会后悔吗?来看看...
- 一个简单的Ajax实例
- 写代码:实现用户输入用户名和密码,当用户名为seven且密码为123时,显示登录成功,否则失败,失败时允许重复输入三次。...
- AMS:startActivity桌面启动应用
- 三相短路电流计算机算法的原理什么,第三章电力系统三相短路电流及实用计算.ppt...
- 爬虫笔记——urllib实战之淘宝零食板块爬取
- 如何安装markman
- [Excel]sumif函数对满足条件的单元格求和
- USB音频编解码芯片电路方案设计(原理图)|TYPEC音频方案|TYPEC扩展坞方案|USB音频方案
- fscanf php,php fscanf() 函数使用方法
- ios swift MVVM实例(Model-View-ViewModel)
- SpringBoot+redis实现用户或者ip恶意单位时间内访问
- 超2t服务器系统,2t云服务器
- 西安理工大学计算机视觉与应用,关于举办计算机视觉与图像处理应用最新进展报告会的通知...
- 飞思卡尔智能车摄像头上位机…
- 《潜能成功学》----如何建立自信
- 平面UI设计培训让大学生轻松获得高薪工作
热门文章
- excel vba 如何将日期周几转换成文字_这5个超实用的Excel技巧,让你的办公效率更高...
- python中object是什么类型_Python 的 type 和 object 之间是怎么一种关系?
- 易语言python1.1模块_易语言之编写模块与引入模块
- python批量删除文件名_python批量删除文件名中的未知字符
- python爬虫常见报错_对Python爬虫常见工具总结,欢迎补充
- 紫外线的形式是什么?
- 链接服务器访问接口返回了消息没有活动事务,因为链接服务器 SQLEHR 的 OLE DB 访问接口 SQLNCLI10 无法启动分布式事务。...
- c++ 工厂模式_大连中山融雪剂工厂自营工厂批发
- 面试官:元素排序Comparable和Comparator有什么区别?
- 超3000岗位!腾讯产业互联网新年大扩招!