[解決済み] ページの読み込みが終了したかどうかを検出する
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
.
関連
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] jest.fn()の値はモック関数またはスパイである必要があります。
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み] モバイル端末の検出にはどのような方法がありますか?
-
[解決済み] jQuery hasAttrで要素に属性があるかどうかをチェックする【重複あり
-
[解決済み] Select <a> which href ends with some string
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み] ディスプレイ:inline-blockをフェードアウトさせる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jQueryです。簡単なオーバーレイを作成するにはどうすればよいですか?
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] jQueryでPUT/DELETEリクエストを送信する方法は?
-
[解決済み] jQueryを使ってロールオーバー時に画像ソースを変更する
-
[解決済み] jQueryでloading spinnerを表示するには?
-
[解決済み] ページが完全にロードされたときに関数を実行するには?
-
[解決済み] ボタンやリンクを無効化・有効化する最も簡単な方法とは(jQuery + Bootstrap)
-
[解決済み] jQueryの.ajax()メソッドが私のセッションクッキーを送信しないのはなぜですか?
-
[解決済み] jQueryで、ある要素を他の要素に対して相対的に配置するには?
-
[解決済み】jQueryで入力不可属性をトグルする。