图片加载js loading

来源：互联网发布：江苏海纳船务知乎编辑：程序博客网时间：2024/05/16 05:46

首先图片加载这种是要在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>

0 0