在KineticJS绘制舞台时显示进度条或旋转器
在KineticJS绘制舞台时显示进度条或旋转器
提问于 2013-07-29 12:24:46
是否有任何方法显示进度条显示整个画布加载所需的时间？
我有一个HTML登录区域，wich (在成功时)执行一个JavaScript-函数来启动动能to绘图。
在我的台式电脑上，它的加载速度非常快，所以任何加载程序或进度条都不会是临时的，但是在移动设备上，一旦我提交了登录信息，就会显示一个空白页面，加载这个平台需要大约5-10秒的时间。
我是否可以用一些东西填充这个空白页，以显示用户我的页面仍在加载？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-07-29 17:28:17
您可以在KineticJS项目运行之前显示一个“加载”
只需在画布下放置一个loading.gif。
然后，当您的项目加载时，删除gif。
下面是代码和Fiddle：http://jsfiddle.net/m1erickson/YaU8W/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
#wrapper{
position:relative;
width:200px;
height:200px;
}
#canvas{
position:absolute; top:0px; left:0px;
border:1px solid green;
width:100%;
height:100%;
}
#loading{
position:absolute; top:50px; left:50px;
border:1px solid gray;
}
</style>
<script>
$(function(){
// Load your KineticJS project
// After your KineticJS is loaded, remove loading.gif
// var element = document.getElementById("loading");
// element.parentNode.removeChild(element);
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<img id="loading" src="https://dl.dropboxusercontent.com/u/139992952/loading1.gif" width=32 height=32></canvas>
<canvas id="canvas" width=200 height=200></canvas>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17923965
复制相关文章
相似问题
腾讯云开发者
