문제
JS 스크립트를 검색하면 일부가 표시됩니다. 메시지 ( "로드, 기다려주세요")와 같은 것 페이지가 모든 이미지를로드 할 때까지.
중요한 - JS 프레임 워크를 사용해서는 안됩니다 (jQuery, mootools 등)는 일반적인 JS 스크립트 여야합니다.
페이지가로드되면 메시지가 사라져야합니다.
해결책
그래 구식 질문! 이것은 우리가 이미지를 사전로드하는 데 사용한 시대로 거슬러 올라갑니다 ...
어쨌든 여기에 코드가 있습니다. 마법은 문서의 "완전한"속성입니다. 이미지 컬렉션 (이미지 객체).
// setup a timer, adjust the 200 to some other milliseconds if desired
var _timer = setInterval("imgloaded()",200);
function imgloaded() {
// assume they're all loaded
var loaded = true;
// test all images for "complete" property
for(var i = 0, len = document.images.length; i < len; i++) {
if(!document.images[i].complete) { loaded = false; break; }
}
// if loaded is still true, change the HTML
if(loaded) {
document.getElementById("msg").innerHTML = "Done.";
// clear the timer
clearInterval(_timer);
}
};
물론 이것은 당신이 어딘가에 던져진 것을 가정합니다.
<div id="msg">Loading...</div>
다른 팁
정적을 추가하십시오 <div>
페이지에 페이지가로드되고 있음을 사용자에게 알립니다. 그런 다음 추가하십시오 window.onload
핸들러 및 DIV를 제거합니다.
BTW, 그 이유는 무엇입니까? 사용자는 아직 브라우저에 페이지로드 표시기가 없습니까?
이미지에 대한 Async Ajax 요청을 수행하고 완료되면 전화를 다시 추가해야합니다.
설명하기위한 코드는 다음과 같습니다.
var R = new XMLHttpRequest();
R.onreadystatechange = function() {
if (R.readyState == 4) {
// Do something with R.responseXML/Text ...
stopWaiting();
}
};
이론적으로 모든 이미지가로드되었는지 확인하는 함수를 실행하는 모든 이미지 객체에 온로드 이벤트가있을 수 있습니다. 이렇게하면 settimeout ()가 필요하지 않습니다. 그러나 이미지가로드되지 않으면 실패하므로 OnError도 고려해야합니다.
제휴하지 않습니다 StackOverflow