Javascriptの「リソースや情報の読み込みが完了してから処理を実行する機能」は、 onload()のほかにどんな種類のものがあるかAIに聞いてみました。
window.onload
ページのすべてのリソース（画像・CSS・iframeなど）が読み込まれた後に実行される。
window.onload = function() {
console.log("ページの全リソースが読み込まれました");
};DOMContentLoaded
HTMLのDOM構造だけが読み込まれたタイミング（画像などの読み込みは待たない）で実行。画像やCSSを待たずにスクリプトを実行したい場合に適しています。
document.addEventListener("DOMContentLoaded", function() {
console.log("DOMの読み込み完了");
});img.onload
特定のリソース（画像など）の読み込み完了を待って処理をする。
const img = new Image();
img.onload = function() {
console.log("画像が読み込まれました");
};
img.src = "example.jpg";fetch().then()/async()/await()
ネットワークリクエストやファイル読み込みなど、非同期処理の完了を待ってから次の処理を行う方法。
fetch("data.json")
.then(response => response.json())
.then(data => {
console.log("データが読み込まれました:", data);
});async function loadData() {
const response = await fetch("data.json");
const data = await response.json();
console.log("データが読み込まれました:", data);
}
loadData();script.onload
外部スクリプト読み込み後の処理を指定。
const script = document.createElement("script");
script.src = "some-library.js";
script.onload = function() {
console.log("外部スクリプトが読み込まれました");
};
document.head.appendChild(script);promise
非同期処理全般を制御する仕組み。処理が成功（resolve）または失敗（reject）したときに次のアクションを指定。
new Promise((resolve, reject) => {
// 非同期処理
setTimeout(() => {
resolve("完了！");
}, 1000);
}).then(result => {
console.log(result);
});まとめ
何に対して「読み込み完了を待つ」のかによって使う方法が変わるので、目的に応じて使い分けるのがポイント
| 目的 | 方法 |
|---|---|
| ページのすべての読み込み完了 | window.onload |
| HTML構造だけ読めればOK | DOMContentLoaded |
| 画像や外部ファイル単独の読み込み待ち | img.onload など |
| 非同期APIやファイル読み込み | fetch().then() や async/await |
| 動的スクリプト読み込み | script.onload |
作れるものが大きくなったら、きちんとデザインされたローディング画面(とローディング処理)をつくるのがかっこいいんだろうなと思いました。
Reply