ページ読み込み時の処理はこれで完璧！$(document).ready と $(window).load の使い分け
2024-04-02
jQuery: $(document).ready と (window).loadの違い
(window).load∗∗は、すべてのコンテンツが読み込まれた時点で実行されます。そのため、以下のような処理に適しています。∗画像のスライドショー∗アニメーションの開始∗データの読み込み∗∗3.使い分け∗∗一般的に、ページ全体の処理は∗∗(document).ready で、画像やその他のリソースを読み込んだ後に実行する処理は $(window).load で行います。
例
// $(document).ready の例
$(document).ready(function() {
// ページのレイアウト調整
$("body").addClass("loaded");
// メニューの表示・非表示
$("#menu").show();
// ボタンの動作設定
$("#button").click(function() {
// 何か処理
});
});
// $(window).load の例
$(window).load(function() {
// 画像のスライドショー
$("#slideshow").slick();
// アニメーションの開始
$("#animation").addClass("animated");
// データの読み込み
$.ajax({
url: "data.json",
success: function(data) {
// データを処理
}
});
});
補足
- (window).load∗∗は、∗∗(document).ready の後に実行されます。
- $(window).load は、IE8 以前では互換性がありません。
その他
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>ページタイトル</h1>
<p>このページはサンプルコードです。</p>
<img src="image.jpg" alt="画像">
<button id="button">ボタン</button>
<script>
// $(document).ready の例
$(document).ready(function() {
// ページのレイアウト調整
$("body").addClass("loaded");
// メニューの表示・非表示
$("#menu").show();
// ボタンの動作設定
$("#button").click(function() {
// 何か処理
alert("ボタンがクリックされました");
});
});
// $(window).load の例
$(window).load(function() {
// 画像のスライドショー
$("#slideshow").slick();
// アニメーションの開始
$("#animation").addClass("animated");
// データの読み込み
$.ajax({
url: "data.json",
success: function(data) {
// データを処理
console.log(data);
}
});
});
</script>
</body>
</html>
説明
- このコードは、HTML、CSS、JavaScript を使用しています。
- (document).ready∗∗は、ページの主要な構造が読み込まれた時点で実行されます。∗∗∗(window).load は、すべてのコンテンツが読み込まれた時点で実行されます。
実行方法
- このコードを HTML ファイルとして保存します。
- ブラウザでファイルを開きます。
結果
- ページが表示されたら、"ページタイトル" と "このページはサンプルコードです。" というテキストが表示されます。
- "ボタン" をクリックすると、"ボタンがクリックされました" というアラートが表示されます。
- すべてのコンテンツが読み込まれると、画像のスライドショーが開始されます。
確認ポイント
- (document).ready∗∗と∗∗(window).load の違いを理解
$(document).ready と $(window).load 以外の方法
document.addEventListener("DOMContentLoaded", function() {
// 処理
});
onload 属性
<body onload="init()">
...
<script>
function init() {
// 処理
}
</script>
</body>
MutationObserver
const observer = new MutationObserver(function(mutations) {
// 処理
});
observer.observe(document, {
childList: true,
subtree: true
});
const observer = new IntersectionObserver(function(entries) {
// 処理
});
observer.observe(document.querySelector("#target"));
カスタムイベント
$(document).on("customEvent", function() {
// 処理
});
$(document).trigger("customEvent");
- setTimeout
- setInterval
注意事項
- これらの方法は、それぞれ異なるタイミングで実行されます。
jquery
