1. ホーム
  2. jquery

[解決済み] ページの読み込みが終了したかどうかを検出する

2022-12-23 03:15:24

質問

ページの読み込みが完了したとき、つまりすべてのコンテンツ、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);
});

どのように解決するのですか?

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/

参照 http://api.jquery.com/load-event/ を参照してください。

更新

javascriptの読み込みの仕組みと、2つのイベントについての詳細な説明です。 DOMContentLoaded OnLoad このページ .

DOMContentLoaded : がロードされると DOMの準備ができた jQuery はこのイベントを捕捉するために jQuery(document).ready(function () {}); .

オンロード : がロードされたとき DOM の準備が整い、すべてのアセット - これには 画像、iframe、フォント、その他 - が読み込まれ、回転する車輪/時間クラスが消えます。このイベントを捕捉するjQueryの方法は、上記のように jQuery(window).load .