顯示進度條或微調器，而KineticJS正在繪製舞臺

有沒有什麼方法可以顯示進度條，顯示整個畫布加載需要多長時間？顯示進度條或微調器，而KineticJS正在繪製舞臺

我有一個HTML登錄區，至少（成功時）執行JavaScript函數來初始化KineticJS圖紙。

在我的桌面pc上加載速度非常快，所以任何加載器或進度條都不會是必須的，但在移動設備上顯示空白頁面後，只要我提交了登錄信息加載舞臺大概需要5-10秒。

我可能會填充這個空白頁面的東西，顯示用戶，我的網頁仍在加載？

來源

2013-07-29 irie

你確定它是需要時間或者是網絡延遲的平局？ – Ani

我猜畫畫花了時間，因爲我的腳本只有32kb大，正如我以前所說的那樣，我的桌面電腦上的「加載」時間與我的iPad或智能手機使用相同的網絡，幾乎沒有引人注目。 – irie

您可以顯示「加載」 .gif注意，直到你的KineticJS項目被運行

只需層畫布下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-29 17:28:17 markE

我希望這不是一個太愚蠢的問題，但我怎麼知道我的KineticJS項目何時完成加載？是否有像您可以聽到的「完成加載」事件？ – irie

如果不知道你的代碼，很難回答;）我假定你照常做......創建舞臺，添加圖層，創建形狀對象，連接事件。然後在最後，你問KineticJS layer.draw（）來顯示你的應用程序。由於大多數KineticJS是同步的，如果你在最後一次layer.draw之後移除了load.gif，你會很好。 – markE

你說得對:)問題是，最後一個layer.draw（）發生得非常快，這仍然導致不需要的白色屏幕的出現。有沒有辦法檢查瀏覽器是否完成了渲染或加載？順便說一句：window.onload等不真的工作，以及... :( – irie

顯示進度條或微調器，而KineticJS正在繪製舞臺

回答

相關問題