※ ChatGPTを利用し、要約された質問です（原文：jqueryでhtmlを読み込んだ後に処理をさせる）
jqueryでhtmlを読み込んだ後に処理をさせる
このQ&Aのポイント
jqueryを使用してhtmlを読み込んだ後に処理をさせる方法について質問です。
特に、モーダルウインドウを作成する際に、リンク先のファイルを読み込んだ後にフェードインで要素を表示させたいです。
画像付きのhtmlファイルを完全に読み込んだ後に処理を行う方法を教えてください。
jqueryでhtmlを読み込んだ後に処理をさせる
お世話になっております。
javascript初心者で最近、JQueryを使い始めた者です。
lightboxのようなモーダルウインドを作りたく、各ボタンのリンク先のファイルを読み込ませた後に
フェードインで読み込ませた要素を表示させたいのですが
以下のソースでは
#overLayerにaタグのリンク先のhtmlファイルを読み込ませた後にフェードインさせる処理がうまくいきません。
読み込ませるload1.htmlに画像を入れていると、フェードインしながら画像が読み込まれてしまいます。
画像付きhtmlファイルを画像データも含め完全に読みこみ終わった後に処理をするにはどのようにすればいいでしょうか？
ご回答宜しくお願いいたします。
//*****javascriptコード****
<script type="text/javascript">
$(function(){
//bodyに背景レイヤーとボックス表示用のレイヤーを追加
$("body").prepend("<div id='glayLayer'></div><div id='overLayer'></div>");
//$("#overLayer").hide();
//ローディング画像のプリロード
$("<img>").attr("src","images/loading.gif");
//背景レイヤークリック時の処理
$("#glayLayer").click(function(){
$(this).hide();
$("#overLayer").fadeOut("slow",function(){
$("#overLayer").html("");
});
});
//リンクボタンクリック時の処理
$("a.modal").click(function(){
$("#glayLayer").show();
$("#overLayer").show();
$("#overLayer").html("<img src='images/loading.gif'>");
$("#overLayer").data("file",$(this).attr("href"));
$("#overLayer").load($("#overLayer").data("file"),function(){
//alert("complete");
$("#overLayer").hide();
$("#overLayer").fadeIn(1000);
});
return false;
});
});
</script>
//****htmlソース****
<body>
<ul>
<li><a href="load1.html" class="modal">テスト1</a></li>
</ul>
</body>
