처음으로 backbone.js 응용 프로그램을로드하면 템플릿을로드하기 전에 6 초 동안 빈 화면이 나타납니다. 우리는 약간의 자바 스크립트 라이브러리가 부 풀리며 빌드 프로세스가 완벽하지는 않지만 이러한 것들은 별개의 문제입니다.은 backbone.js 응용 프로그램이있는 시각적 로더 막대를 구현합니다.
require.js와 함께 backbone-boilerplate를 사용하고 있으며 모든 애셋, 데이터, 템플릿이로드되고 렌더링되어 표시되지 않는 종류의 Gmail 유형의 로더가 필요합니다. 그냥 빈로드 페이지.
어쨌든 이런 일을 할 수 있습니까?
내가 해결 한 방법이가 된 index.html에서 애니메이션 스피너 GIF 포함하는 것입니다 :
<html>
<!-- header with scripts etc -->
<body>
<img id="spinner" class="centered" src="/images/spinner.gif"></img>
</body>
</html>
을 그리고 모든 자산이 다운로드 한 경우, 모델은 초기화 및 응용 프로그램의 기본보기가 될 준비가되어 있습니다 그것은 그 자체 진행 상황을 표시하지 않습니다
var appView = new AppView().render();
$("img#spinner").replaceWith(appView.el);
하지만 사용자 알고 로딩이 일어나고 있습니다 : 렌더링, 단순히 컨텐츠와 회 전자를 대체합니다.
requirejs 로딩 이벤트에 연결하는 방법이있을 수 있지만이를 알지 못합니다. 모든 리소스를 단일 파일로 축소하고 결합하려는 경우 단일 파일의 다운로드 진행률을 매우 정확하게 추적 할 수 없기 때문에 어쨌든 유용하지는 않습니다.