경우 1 :는
나는 복잡한 레이아웃과 폰트를 많이 포함하는 매우 큰 HTML 페이지를로드합니다. 페이지를 렌더링하는 데 알 수없는 시간이 걸립니다.
경우 2 :
나는 나의 DOM에 큰 변화를 만들기 위해 JQuery와 .html 중에서() 함수를 사용합니다. 수정 된 DOM은 알 수없는 시간이 걸립니다.
두 경우 모두 페이지가 으로 완전히 완료되면이 될 때까지 전체 화면을 회 전자로 덮을 수 있어야합니다.
이 질문에 대한 답변을 검색 할 때 비슷한 질문이 있지만 답변이 적절하지 않습니다. 명확하게하기 :
DOM 준비 시점을 알고 싶지 않습니다.
HTTP 데이터를 언제 가져 왔는지 알고 싶지 않습니다.
DOM에있는 모든 것이 일 때 완전히 알고 싶습니다..
최악의 경우 시간 초과를 설정하는 것은 용인 할 수없는 해결책입니다.
WebKit 기반 브라우저 용 솔루션이 필요합니다.
은 내 머리 위로, 당신은 같은 것을 할 수 방금 : 물론
var img_loaded;
$(lastImg).load(function() { img_loaded = true; });
(function checkLoading() {
return $(lastElement).css("lastProperty") === "value" && img_loaded ? stopLoading() : setTimeout(checkLoading, 50);
}());
, 잘못된 많은이와 거기를 :
Safari 3에 대해서만 이야기 한 문서는 나중에 Safari 3의 onload 2 버전을 신뢰할 수 있습니까?
는 경우 하나를 위해 나는 당신이 사용할 수있는 생각 :
이 같은<BODY onLoad="alert('Page Fully Loaded')">
뭔가 희망이 작동합니다 :
...
<head>
...
<style type="text/css">
#overlay {
background:url(../images/loading.gif) no-repeat 50% 50%;
display:none;
}
.loading #overlay {
display:block;
left:0;
height:100%;
position:absolute;
top:0;
width:100%;
}
.loading > #overlay {
position:fixed;
}
</style>
<script>
if (document.documentElement) {
document.documentElement.className = 'loading';
}
</script>
</head>
<body>
..
<div id="overlay">
..
</div>
<script>
$(document).ready(function() {
$('.loading #overlay').fadeOut(500,
function() {
$(document.documentElement).removeClass('loading');
$('#overlay').remove();
});
});
</body>
</html>
그냥 작은 점을; 대부분의 브라우저는 자바 스크립트를 처리하는 동안 회 전자에 애니메이션을 적용하지 않습니다. 특히 IE는 매우 단일 스레드로 동작합니다.
'회 전자'에는 다른 애니메이션이 아닌 디자인을 사용하는 것이 좋습니다. 모래 시계 같아.
당신의 생각은 언제나 도전 과제입니다. $ (document) .ready 이벤트에서 호출하는 초기화 코드 다음에 무엇인가 넣지 마십시오. IE의 경우에는 마지막에 실행해야합니다.
경험에서 이것을 확인할 수 있습니다 - 아름다운 회 전자를 발견하고, 페이지가로드 될 때까지 대부분 얼어 붙습니다. – CodeVirtuoso
전자는 쉽습니다 :'onload'를 사용하십시오. 후자는 가능한지, 무슨 일이 일어나는지보고 싶어하는지 모르겠다. –
사용성의 관점에서, 전체 화면을 회 전자로 덮는 것은 IMO가 할 수있는 최악의 경우입니다. 긴 하중을 더 길게 만듭니다. 단지 2 엔. : o) – deceze
기본 HTML에 회 전자를 추가하고 모든 자바 스크립트가 완료된 후 회 전자를 숨길 수는 없습니까? –