HTML5로 표시하기 전에 내용로드하기

인터넷에서 잡지를 개발 중이며 실제로 컨텐츠를 표시하기 전에 모든 컨텐츠 (이미지, 비디오, DOM)를 준비 상태로로드 할 수 있는지 알고 싶습니다. 로드하는 동안 진행률 표시 줄에 콘텐츠 로딩 진행률이 표시됩니다. 고마워요!HTML5로 표시하기 전에 내용로드하기

출처

2012-01-23 AJ Naidas

는 같은 유무 :

<body> 
    <div id="allcontent" style="display:none;"> 
      <!-- your entire page --> 
    </div> 
    <div id="progressbar">...</div> 
</body>

그리고를 다음

$(window).load(function() { 
    $('#progressbar').remove(); 
    $('#allcontent').show(); 
});

편집 : 당신은 $('img')의 수를 계산하고 각에서 이미로드 된 이미지의 비율을 계산하여 진행 상황을 시뮬레이션 할 수 있습니다 $('img').load 이벤트. 그것은 완벽하지는 않지만 아무것도 아닌 것보다

출처

2012-01-23 10:35:44 ori

이렇게하면 javacript를 사용할 수 없을 때 콘텐츠에 액세스 할 수 없게됩니다. – fcalderan

그러면 HTML 대신 '$ (document) .ready'에 숨 깁니다. (깜박 일까?) – ori

Naidas가 원하는 것은 정확히 무엇입니까. –

<html> 요소에 적용된 특정 클래스를 사용하여 보일러 플레이트와 같은 솔루션을 제안합니다. 내 예를 들어 바이올린을 참조하십시오 http://jsfiddle.net/tKtYd/

아이디어가 head 곧 자바 스크립트를 통해 클래스 waitpageloadbeforedisplay을 적용하고 주요 사이트 래퍼를 숨기려면 CSS에서이 클래스를 사용하는 것입니다. 그런 다음 창 load 이벤트가 해당 클래스를 제거하고 사이트 콘텐츠를 표시 할 때까지 기다립니다. 이 방법으로 자바 스크립트를 사용할 수 없거나 사용할 수없는 경우에도 콘텐츠에 계속 액세스 할 수 있습니다.

로더는 CSS 배경 규칙 .waitpageloadbeforedisplay body을 사용하여 바디 배경으로 표시됩니다. 따라서 스타일 지정 목적으로 마크 업을 사용할 필요가 없습니다.

출처

2012-01-23 10:45:47 fcalderan

HTML5로 표시하기 전에 내용로드하기

답변

관련 문제