0

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

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

在我的桌面电脑上，它加载得非常快，因此不需要任何加载器或进度条，但在移动设备上，一旦我提交了登录信息，它就会显示一个空白页面，它需要大约加载舞台需要 5-10 秒。

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

4

1 回答 1

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>
于 2013-07-29T17:28:17.117 回答