Question

有没有办法显示一个进度条，显示整个画布加载需要多长时间？

我有一个HTML登录区域，（成功时）执行一个JavaScript函数来启动KineticJS绘图。

在我的桌面电脑上，它加载速度非常快，因此任何加载程序或进度条都不是必需的，但在移动设备上显示空白页面，只要我提交了登录信息和加载舞台大约需要5-10秒。

我可以用一些东西来填充这个空白页面，这会向用户显示我的页面仍在加载吗？

Answer 1

在KineticJS项目开始运行之前，您可以显示“加载”.gif

只需在画布下叠加一个loading.gif。

然后在加载项目时，删除gif。

这是代码和小提琴：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>

在KineticJS绘制舞台时显示进度条或微调器

1 个答案: