ページの読み込みが完了したかどうかを検出する


91

ページの読み込みが完了したことを検出する方法はありますか。つまり、すべてのコンテンツ、JavaScript、CSSや画像などのアセットです。

以下のようなので:

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

さらに、ページが1分以上ロードされている場合は、次のような他のことを行います。

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

AppleのMobileMeのようなWebサイトが同様のチェックを行うのを見てきましたが、それらの巨大なコードライブラリでそれを理解することができませんでした。

誰か助けてもらえますか?

ありがとう

編集:これは基本的に私がやりたいことです:

// 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);
});

2
window.onload(または$(window).load())が機能しない理由はありますか?
sdleihssirhc 2011

@Cameronさん、こんにちは。ページの読み込みが完了した後、ローダーを非表示にするために機能するコードはどれですか。
tnkh 2017

:私の答えを参照してください@TonyNg stackoverflow.com/questions/7083693/...
キャメロン

回答:


125
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/ も参照してください

更新

JavaScriptの読み込みがどのように機能するか、および2つのイベントDOMContentLoadedOnLoadに関する詳細な説明は、このページにあります

DOMContentLoadedDOMを操作する準備ができたとき。このイベントをキャプチャするjQueryの方法は、を使用することjQuery(document).ready(function () {});です。

OnLoadDOMの準備が整い、すべてのアセット(これには画像、iframe、フォントなどが含まれます)が読み込まれ、回転ホイール/時間クラスが消えます。jQueryがこのイベントをキャプチャする方法は、上記のとおりjQuery(window).loadです。


私のOPを見ると、私の目的がわかるように修正されています。したがって、基本的には、すべてのアセットが読み込まれた後にページを表示し、ローダーをフェードアウトしてコンテンツをフェードインしたいと思います。私のコードは正しく動作しますか?乾杯
キャメロン

あなたのコードは大丈夫に見えますが、確かにそれが動作しているのを見る必要があります。
TJ。

@Jimmerはい: MDN「リソースとその依存リソースの読み込みが完了すると、loadイベントが発生します。」
TJ。

2
これjQuery.load()はjQuery / 1.8以降廃止され、jQuery / 3で削除されました。現在の構文はjQuery(window).on("load", function(){/*...*/});です。
アルバロ・ゴンサレス

58

あなたが探しているものに応じて、jqueryでこれを行うには2つの方法があります。

あなたができるjqueryを使用して

  • //これは、これを呼び出す前にテキストアセットがロードされるのを待ちます(dom .. css .. js)

    $(document).ready(function(){...});
  • //すべての画像とテキストアセットの読み込みが完了するのを待ってから実行します

    $(window).load(function(){...});

この方法では、ページが数分間ロードされているがまだ完了していないかどうかをどのように確認できますか?
yoozer8

2
これは、setTimeout(function(){!loaded && foo();}、20000);を使用して実行できます。doc readyまたはwindow loadでloadをtrueに設定します
samccone

1
jquery 3.0の場合、$(window).on( "load"、function(e){});を使用します。
zero8 '19

13

これはonloadと呼ばれます。DOM readyは、onloadが画像を待機した正確な理由で実際に作成されました。(先ほどの同様の質問についてMatchuから回答が得られました。)

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

onloadは、ドキュメントの一部であるすべてのリソースを待ちます。

彼がすべてを説明した質問へのリンク:

私をクリックしてください、あなたはあなたがしたいのを知っています!


10

最も簡単な方法は

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
});

私は親切もつともitemslenこのアイデアなどを0にカウントダウンしているようだことはありません
バンニング

1
この方法の注意-リストされているすべての要素に「load」イベントがあることを前提としていますが、この例ではそれらの多くにはありません。
John Wedgbury、

6

次のようなdocument.readyStateを確認できる別のオプション

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

readyState Pageのドキュメントから、完全な状態の要約は

ドキュメントの読み込み中は「読み込み中」を返し、解析が終了してサブリソースを読み込んでいる場合は「インタラクティブ」を返し、読み込み後は「完了」を返します。


キャッシュされた画像に問題がありましたが、これはパフォーマンスの点でより優れたコードのようです...練習について疑問がありますか?jQueryよりも優れているよう$(window).on("load" function () {//dostuff})です...?
kmkmkm 2017年

3

1つのオプションは、ページを空白にして、少量のJavaScriptを含めることです。スクリプトを使用してAJAX呼び出しを行い、実際のページコンテンツを取得し、success関数に現在のドキュメントに結果を書き込みます。タイムアウト機能では、「驚くべきこと」を実行できます

おおよその疑似コード:

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

はい、そうです。しかし、「ページへのリクエストがタイムアウトになった場合、ページはどのように判断できるのですか」と私が自問したとき、それが最初に思い浮かんだ方法です。
yoozer8

画像は完成ロードを持っている場合だけでなく、それは生のマークアップがロードされている場合ではなく、それだけ言うだろう..あなたを教えてくれません
samccone

うーん。興味深い質問に私を導きます。$(document).html(response)を実行しただけで、応答にdocument.readyまたはwindow.loadが含まれていた場合、ドキュメントが書き込まれると実行されますか?または、ブラウザはページがすでにロードされていると認識し、コンテンツの変更時にそれらを呼び出さないのでしょうか?
yoozer8

私はそれを2回目に呼び出すと思いますが、100%ではありません...試してみてください
samccone

2

これはあなたが考えていたものですか?

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

1
これはDOMの準備ができたときに実行されますが、画像などの読み込みが完了する前に実行できます。
James Allardice、2011


2

jqueryまたはそのようなものがないので、なぜですか?

var loaded=0;
var loaded1min=0;
document.addEventListener("DOMContentLoaded", function(event) {
   loaded=1;
    setTimeout(function () {
      loaded1min=1;
    }, 60000);
});

これは正しいですが、jquery実行するものとは少し異なります。 DOMContentLoaded外部コンテンツがロードされた後にのみトリガーされます(特に、特定の条件では時間がかかる可能性がある画像)。 ブラウザ固有のイベントjquery.ready()使用して実行します。これは、(ほとんどのブラウザでは)外部コンテンツがロードされる前に発生します。
2016年

1

コメントで尋ねた人々の参考までに、これは私が実際にプロジェクトで使用したものです:

function onLoad(loading, loaded) {
    if(document.readyState === 'complete'){
        return loaded();
    }
    loading();
    if (window.addEventListener) {
        window.addEventListener('load', loaded, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', loaded);
    }
};

onLoad(function(){
   console.log('I am waiting for the page to be loaded');
},
function(){
    console.log('The page is loaded');
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.