[jquery] 페이지로드가 완료되었는지 감지

Question 1

페이지의 모든 콘텐츠, 자바 스크립트 및 CSS 및 이미지와 같은 자산로드가 완료되면 감지하는 방법이 있습니까?

그처럼:

if(PAGE HAS FINISHED LOADING)
{
// do something amazing
}

또한 페이지가 1 분 이상로드 된 경우 다음과 같은 다른 작업을 수행하십시오.

if(PAGE HAS BEEN LOADING FOR 1 MIN)
{
// do something else amazing
}

나는 Apple의 MobileMe와 같은 웹 사이트가 유사한 검사를 수행하는 것을 보았지만 거대한 코드 라이브러리에서 그것을 알아낼 수 없었습니다.

누구든지 도울 수 있습니까?

감사

편집 : 이것은 본질적으로 내가 원하는 것입니다.

// hide content
$("#hide").hide();

// hide loading
$("#loading").hide();

// fade in loading animation
setTimeout($('#loading').fadeIn(), 200);

jQuery(window).load(function() {
  $("#hide").fadeIn();

  $("#loading").fadeOut(function() {
    $(this).remove();
    clearInterval(loadingAnim);
  });

  setTimeout(function() {
    $("#error").fadeIn();
  }, 60000);
});

Question 2

jQuery(window).load(function () {
    alert('page is loaded');

    setTimeout(function () {
        alert('page is loaded and 1 minute has passed');
    }, 60000);

});

또는 http://jsfiddle.net/tangibleJ/fLLrs/1/

jQuery (window) .load에 대한 설명 은 http://api.jquery.com/load-event/ 를 참조하십시오 .

최신 정보

자바 스크립트 로딩이 작동하는 방식과 DOMContentLoaded 및 OnLoad 두 이벤트에 대한 자세한 설명 은 이 페이지 에서 찾을 수 있습니다 .

DOMContentLoaded : DOM 을 조작 할 준비 가 된 경우. 이 이벤트를 캡처하는 jQuery의 방법은 jQuery(document).ready(function () {});.

온로드 하십시오 때 DOM이 준비하고 모든 자산 -이 포함 이미지, iframe을, 글꼴 등 로드 물레 / 시간 클래스가 사라 한을 -. 이 이벤트를 캡처하는 jQuery의 방법은 위에서 언급 한 jQuery(window).load.

Question 3

찾고있는 항목에 따라 jquery에서이를 수행하는 두 가지 방법이 있습니다.

jquery를 사용하여 할 수 있습니다.

// 이것은 이것을 호출하기 전에 텍스트 자산이로드되기를 기다릴 것입니다 (dom .. css..js).
```
$(document).ready(function(){...});
```
// 실행하기 전에 모든 이미지와 텍스트 애셋이로드를 완료 할 때까지 기다립니다.
```
$(window).load(function(){...});
```

Question 4

이를 온로드라고합니다. DOM Ready는 실제로 onload가 이미지를 기다린 정확한 이유 때문에 생성되었습니다. ( 얼마 전에 비슷한 질문에 대한 Matchu의 답변 입니다.)

window.onload = function () { alert("It's loaded!") }

onload는 문서의 일부인 모든 리소스를 기다립니다.

그가 모든 것을 설명했던 질문에 대한 링크 :

나를 클릭하십시오.

Question 5

가장 쉬운 방법은

var items = $('img, style, ...'), itemslen = items.length;

items.bind('load', function(){
    itemslen--;
    if (!itemlen) // Do stuff here
});

조금 미쳐서 편집하십시오.

var items = $('a, abbr, acronym, address, applet, area, audio, b, base, ' +
    'basefont, bdo, bgsound, big, body, blockquote, br, button, canvas, ' +
    'caption, center, cite, code, col, colgroup, comment, custom, dd, del, ' +
    'dfn, dir, div, dl, document, dt, em, embed, fieldset, font, form, frame, ' +
    'frameset, head, hn, hr, html, i, iframe, img, input, ins, isindex, kbd, ' +
    'label, legend, li, link, listing, map, marquee, media, menu, meta, ' +
    'nextid, nobr, noframes, noscript, object, ol, optgroup, option, p, ' +
    'param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, ' +
    'source, span, strike, strong, style, sub, sup, table, tbody, td, ' +
    'textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, video, ' +
    'window, xmp'), itemslen = items.length;

items.bind('load', function(){
    itemslen--;
    if (!itemlen) // Do stuff here
});

Question 6

document.readyState를 확인할 수있는 또 다른 옵션은 다음 과 같습니다.

var chkReadyState = setInterval(function() {
    if (document.readyState == "complete") {
        // clear the interval
        clearInterval(chkReadyState);
        // finally your page is loaded.
    }
}, 100);

readyState Page의 문서에서 전체 상태 요약은 다음과 같습니다.

문서가로드되는 동안 “로드 중”을 반환하고, 구문 분석이 완료되면 “대화 형”을 반환하지만 하위 리소스를로드하고 나면 “완료”를 반환합니다.

Question 7

한 가지 옵션은 소량의 자바 스크립트를 포함하여 페이지를 비워 두는 것입니다. 스크립트를 사용하여 AJAX 호출을 수행하여 실제 페이지 콘텐츠를 가져오고 성공 함수가 현재 문서에 결과를 작성하도록합니다. 타임 아웃 기능에서 “다른 놀라운 일을 할 수 있습니다”

대략적인 의사 코드 :

$(document).ready(function(){
    $.ajax
      url of actual page
      success:do something amazing
      timeout: do something else
});

Question 8

이것이 당신이 염두에 둔 것입니까?

$("document").ready( function() {
    // do your stuff
}