お世話になっております。 javascript初心者で最近、JQueryを使い始めた者です。 lightboxのようなモーダルウインドを作りたく、各ボタンのリンク先のファイルを読み込ませた後にフェードインで読み込ませた要素を表示させたいのですが以下のソースでは #overLayerにaタグのリンク先のhtmlファイルを読み込ませた後にフェードインさせる処理がうまくいきません。読み込ませるload1.htmlに画像を入れていると、フェードインしながら画像が読み込まれてしまいます。画像付きhtmlファイルを画像データも含め完全に読みこみ終わった後に処理をするにはどのようにすればいいでしょうか？ご回答宜しくお願いいたします。 //*****javascriptコード**** $(function(){ //bodyに背景レイヤーとボックス表示用のレイヤーを追加 $("body").prepend(" "); //$("#overLayer").hide(); //ローディング画像のプリロード $(" ").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(" "); $("#overLayer").data("file",$(this).attr("href")); $("#overLayer").load($("#overLayer").data("file"),function(){ //alert("complete"); $("#overLayer").hide(); $("#overLayer").fadeIn(1000); }); return false; }); }); //****htmlソース**** テスト1

jqueryでhtmlを読み込んだ後に処理をさせる

解決済

質問者：whosfoo
質問日時：2011/04/29 16:28
回答数：1件

お世話になっております。
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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： reggaepunc
回答日時：2011/05/07 01:08

load1.htmlファイルの読み込み完了までは上手く動作していると思います。

画像の読み込みもjsのload()メソッドで監視出来れば良いのですが。

解決案としては、
・load1.htmlをload()するjs側で画像をロードする。
・load1.htmlの中に、jsで画像の読み込み完了をload()メソッドで監視する。

--------------------------
上記のどちらかでどうでしょう。