[解決済み] jQueryを使用しない$(document).ready相当
2022-03-14 02:35:31
質問
を使用するスクリプトがあります。
$(document).ready
しかし、それはjQueryの他の何も使用していません。jQueryの依存関係を取り除くことで軽量化したいです。
を実装するにはどうすればよいですか?
$(document).ready
の機能は、jQuery を使用せずに実現できますか?私が知っているのは
window.onload
は同じにはなりません。
window.onload
は、すべての画像やフレームなどが読み込まれた後に起動します。
解決方法は?
規格に基づいた代替品がある。
DOMContentLoaded
でサポートされています。
99%のブラウザが
ただし、IE8は除く。
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
jQueryのネイティブ関数は、下図のようにwindow.onloadだけでなく、もっと複雑な機能を持っています。
function bindReady(){
if ( readyBound ) return;
readyBound = true;
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
jQuery.ready();
}, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
jQuery.ready();
}
});
// If IE and not an iframe
// continually check to see if the document is ready
if ( document.documentElement.doScroll && window == window.top ) (function(){
if ( jQuery.isReady ) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}
// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready );
}
関連
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】JavaScriptの配列でforEachが関数でない不具合
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] window.onload vs $(document).ready()
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
Vueの要素ツリーコントロールに破線を追加する説明
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
vueディレクティブv-bindの使用と注意点
-
vueにおけるfilterの適用シーンについて解説します。
-
Vueのフィルタの説明
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
[解決済み] jQueryの$.ready()に相当する純粋なJavaScript - ページ/DOMの準備ができたときに関数を呼び出す方法 [重複]。