2024.08.27
jQuery の .load() を使って外部ファイルを読み込むとき、読み込み完了した時点で独自のイベントを発生させる方法です。
.load() が書かれているスコープの外でも読み込み完了を受け取ることができるので、読み込みを待ってから処理を行いたいときなどに便利です。
●ファイル読み込みのスクリプト
●イベントを受け取って実行するスクリプト
$("body")に対して "fileLoaded" というイベントを発生させています。
汎用的に使えるよう $("body") にしていますが、そのぶん被りづらいイベント名にするのが良いと思います。
.load() が書かれているスコープの外でも読み込み完了を受け取ることができるので、読み込みを待ってから処理を行いたいときなどに便利です。
●ファイル読み込みのスクリプト
$(function(){
$(".hoge").load("xxxxxx.html", function(){
$("body").trigger("fileLoaded"); // イベント名は自由に設定できます
});
});
●イベントを受け取って実行するスクリプト
$("body").on("fileLoaded", function() {
// 読み込み完了時の処理
});
$("body")に対して "fileLoaded" というイベントを発生させています。
汎用的に使えるよう $("body") にしていますが、そのぶん被りづらいイベント名にするのが良いと思います。
1
