图片加载js loading

最新推荐文章于 2023-04-20 10:58:40 发布

雪狼之夜

最新推荐文章于 2023-04-20 10:58:40 发布

阅读量763

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xuelang532777032/article/details/52245090

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

首先图片加载这种是要在IIS下运行的你html代码直接运行是看不到效果的只有在php jsp aspx 也就是后端人员插完代码后，你才能看到加载的效果

不过不妨碍，我们前端html可以先做，等到他们挂到服务器上就可以看到效果了

1、先去下载一个图片加载控件

http://download.csdn.net/detail/xuelang532777032/9607075

2、在下载一个 jQuery 有你就不用下载了

http://download.csdn.net/detail/xuelang532777032/7785011

然后就是代码了这个是 demo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>加载</title>
<meta content="max-age=0" http-equiv="Cache-Control" />
<meta content="320" name="MobileOptimized" />
<meta content="YES" name="apple-touch-fullscreen" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/load.css">
</head>
<body>

	<div class="load">
    	<cite><em></em><i></i></cite>
	</div>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/resLoader.js"></script>
<script>
var loader = new resLoader({
	resources : [
		'images/a1.jpg',
		'images/a2.jpg',
		'images/a3.jpg',
		'images/a4.jpg',
		'images/a5.jpg',
		'images/a6.jpg',
		'images/a7.jpg'
	],
	onStart : function(total){
		//console.log('start:'+total);
	},
	onProgress : function(current, total){
		var percent = current/total*100;
		$(".load cite em").html(parseInt(percent)+"%");
		
	},
	onComplete : function(total){
		$(".load cite em").html('跳转中')
		setTimeout(function(){
			//window.location.href="index.html"; 
		},500)
		
	}
});
loader.start();
</script>
</body>
</html>

load.css

@charset "utf-8";
body{ background:#FFF}
.load{ display:block; width:100%; height:100%; }
.load cite{ display:block; margin:auto; position:absolute;left:0px;top:0px;right:0px;bottom:0; width:100px; height:100px;border-radius:50%;}
.load cite i{ position:absolute;left:0px; bottom: 0px; background: #00bbff ; background-size:100% auto; border-radius: 50%; z-index:1; width:100%; height:100%; box-shadow: 0px 0px 1px rgba(11,189,255,0.5); -webkit-animation:load 1s linear infinite;}
.load cite em{ position:absolute; font-style: normal; color: #0BF; font-weight: bold; text-align: center; line-height: 96px; z-index:2; font-size: 26px; display:block; width:96px; height:96px; top:2px;left:2px;; background: rgba(255, 255, 255, 1); border-radius:50%;}
@-webkit-keyframes load{0%{  -webkit-transform: rotate(0deg) translate(0,0) scale(0.8,0.8)}50%{-webkit-transform:scale(1,1)}100%{-webkit-transform:rotate(360deg) translate(0,10px) scale(0.8,0.8)}}

雪狼之夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
图片加载js loading

首先图片加载这种是要在IIS下运行的你html代码直接运行是看不到效果的只有在php jsp aspx 也就是后端人员插完代码后，你才能看到加载的效果不过不妨碍，我们前端html可以先做，等到他们挂到服务器上就可以看到效果了1、先去下载一个图片上传控件http://download.csdn.net/detail/xuelang5327
复制链接

扫一扫