로드 메시지

Question

JS 스크립트를 검색하면 일부가 표시됩니다. 메시지 ( "로드, 기다려주세요")와 같은 것 페이지가 모든 이미지를로드 할 때까지.

중요한 - JS 프레임 워크를 사용해서는 안됩니다 (jQuery, mootools 등)는 일반적인 JS 스크립트 여야합니다.

페이지가로드되면 메시지가 사라져야합니다.

Answer 1

그래 구식 질문! 이것은 우리가 이미지를 사전로드하는 데 사용한 시대로 거슬러 올라갑니다 ...

어쨌든 여기에 코드가 있습니다. 마법은 문서의 "완전한"속성입니다. 이미지 컬렉션 (이미지 객체).

// 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>

Answer 2

정적을 추가하십시오 <div> 페이지에 페이지가로드되고 있음을 사용자에게 알립니다. 그런 다음 추가하십시오 window.onload 핸들러 및 DIV를 제거합니다.

BTW, 그 이유는 무엇입니까? 사용자는 아직 브라우저에 페이지로드 표시기가 없습니까?

Answer 3

이미지에 대한 Async Ajax 요청을 수행하고 완료되면 전화를 다시 추가해야합니다.
설명하기위한 코드는 다음과 같습니다.

var R = new XMLHttpRequest();
R.onreadystatechange = function() {
  if (R.readyState == 4) {
    // Do something with R.responseXML/Text ...
    stopWaiting();
  }
};

Answer 4

이론적으로 모든 이미지가로드되었는지 확인하는 함수를 실행하는 모든 이미지 객체에 온로드 이벤트가있을 수 있습니다. 이렇게하면 settimeout ()가 필요하지 않습니다. 그러나 이미지가로드되지 않으면 실패하므로 OnError도 고려해야합니다.