KineticJS가 스테이지를 그리는 동안 진행률 막대 또는 회 전자 표시

전체 캔버스를로드하는 데 걸리는 시간을 보여주는 진행률 막대를 표시 할 수있는 방법이 있습니까?KineticJS가 스테이지를 그리는 동안 진행률 막대 또는 회 전자 표시

필자는 (성공시) JavaScript 기능을 실행하여 KineticJS 도면을 시작하는 HTML 로그인 영역이 있습니다.

데스크탑 PC에서 매우 빨리 로딩하므로 모든 로더 또는 진행률 막대가 필요하지 않지만 로그인 정보를 제출하면 바로 모바일 장치에 빈 페이지가 표시됩니다 스테이지를로드하는 데 약 5-10 초가 걸립니다.

빈 페이지에 내 페이지가 아직로드 중임을 나타내는 무언가를 채울 수 있습니까?

2013-07-29 irie

가 확신하는이 시간을내어하거나 네트워크 지연이다 추첨 ?? – Ani

필자의 그림이 단지 32kb 크기이기 때문에 그리기에 시간이 걸릴 것으로 추측 할 수 있습니다. 이전에 말한 것처럼, iPad 나 스마트 폰과 동일한 네트워크를 사용하는 데스크탑 PC의 "로딩" 거의 눈에 띄지 않습니다. – irie

당신은 당신의 KineticJS 때까지 프로젝트가 그냥 캔버스 아래 loading.gif 레이어

실행됩니다 .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 다음에 loading.gif를 제거하면 좋을 것입니다. – markE

맞아요 :) 문제는 마지막 layer.draw()가 매우 빠르게 발생하여 원하지 않는 흰색 화면이 계속 나타나는 것입니다. 브라우저에서 렌더링 또는로드가 완료되었는지 확인하는 방법이 있습니까? Btw : window.onload 등은 실제로 잘 작동하지 않습니다. : ( – irie

KineticJS가 스테이지를 그리는 동안 진행률 막대 또는 회 전자 표시

답변

관련 문제