Показывать индикатор выполнения или прядильщик, пока KineticJS рисует сцену

Есть ли способ отобразить индикатор выполнения, показывающий, сколько времени потребуется для загрузки всего холста?Показывать индикатор выполнения или прядильщик, пока KineticJS рисует сцену

У меня есть область входа в HTML, в которой (по успеху) выполняется JavaScript-функция для инициирования чертежей KineticJS.

На моем настольном ПК он загружается очень быстро, так что любой загрузчик или индикатор прогресса не обязательно, но на мобильных устройствах отображается пустая страница, как только я отправил информацию для входа и для загрузки сцены требуется около 5-10 секунд.

Могу ли я заполнить эту пустую страницу чем-то, что показывает пользователю, что моя страница по-прежнему загружается?

источник

2013-07-29 irie

вы уверены, что его жеребьевка, которая принимает время или это сетевые задержки ?? – Ani

Я бы предположил, что чертеж занимает время, потому что мой скрипт всего 32kb большой, и, как я сказал ранее, «загрузка» -time на моем настольном ПК, в котором используется та же сеть, что и мой iPad или смартфон, едва заметен. – irie

Вы могли бы показать «загрузку» .gif, пока ваш 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>

источник

2013-07-29 17:28:17 markE

Надеюсь, это не слишком глупый вопрос, но как я узнаю, когда мой KineticJS-проект закончил загрузку? Есть ли что-то вроде «готовой загрузки», которую вы могли бы прослушать? – irie

Трудно ответить, не зная вашего кода;) Я предполагаю, что вы делаете обычное ... создаете сцену, добавляете слои, создаете объекты формы, создаете события. Затем в конце вы попросите KineticJS для layer.draw() отобразить ваше приложение. Поскольку большая часть KineticJS является синхронной, если вы удалите load.gif после этого последнего слоя.draw, вы будете хороши. – markE

Вы правы: проблема в том, что последний layer.draw() происходит очень быстро, что еще вызывает появление нежелательного белого экрана. Есть ли способ проверить, закончил ли браузер рендеринг или загрузка? Btw: window.onload и т. Д. На самом деле не работает ... :( – irie

Показывать индикатор выполнения или прядильщик, пока KineticJS рисует сцену

ответ

Смежные вопросы