HTML5 앱의 화면로드 중

Question

많은 게임 (css, js 등)을 얻는 것과 관련된 프로젝트 (게임이 아님)를 만들고 있습니다. UIWebView (iOS)에서 페이지를 열면 모든 것이로드되는 동안 3-5 초 동안 빈 페이지가 나타납니다.

나는 이것을 피하고 싶습니다. HTML5 로딩 화면을 추가해야 겠지만 어떻게해야하는지 모릅니다. 어떤 포인터?

Answer 1

로드 될 때까지 내용을 숨기고 JS를 사용하여 그 동안로드 애니메이션을 표시합니다. 당신은 HTML5에 <progress> 요소를 사용할 수 Simple loading animation in HTML5 canvas

Answer 2

간단한 애니메이션 체크 아웃에 대한

. 소스 코드 및 라이브 데모는이 페이지를 참조하십시오. 여기

http://purpledesign.in/blog/super-cool-loading-bar-html5/는

<progress id="progressbar" value="20" max="100"></progress> 

이

는 요소가 늘 충분 물론 20부터 로딩 값을 갖게됩니다 ... 진행 요소입니다. 스크립트가로드 될 때 스크립트를 이동해야합니다. 이를 위해서는 JQuery가 필요하다. 다음은 0에서 100까지 진행을 시작하고 정의 된 시간 슬롯에서 작업을 수행하는 간단한 JQuery 스크립트입니다.

<script> 
     $(document).ready(function() { 
     if(!Modernizr.meter){ 
     alert('Sorry your brower does not support HTML5 progress bar'); 
     } else { 
     var progressbar = $('#progressbar'), 
     max = progressbar.attr('max'), 
     time = (1000/max)*10, 
     value = progressbar.val(); 
     var loading = function() { 
     value += 1; 
     addValue = progressbar.val(value); 
     $('.progress-value').html(value + '%'); 
     if (value == max) { 
     clearInterval(animate); 
     //Do Something 
} 
if (value == 16) { 
//Do something 
} 
if (value == 38) { 
//Do something 
} 
if (value == 55) { 
//Do something 
} 
if (value == 72) { 
//Do something 
} 
if (value == 1) { 
//Do something 
} 
if (value == 86) { 
//Do something 
    } 

}; 
var animate = setInterval(function() { 
loading(); 
}, time); 
}; 
}); 
</script> 

HTML 파일에 추가하십시오.

<div class="demo-wrapper html5-progress-bar"> 
<div class="progress-bar-wrapper"> 
<progress id="progressbar" value="0" max="100"></progress> 
<span class="progress-value">0%</span> 
</div> 
</div> 

희망이 있으면 도움이 될 것입니다.