js、 jQuery の手直しを助けてください

Question

js, jQuery　初心者です。下記のコードの手直しを助けて下さいこのコードはページ内の複数設置されたリンクのいずれかをクリックすると背景の画像がフェードしながら変わるというものです。例えばリンク１を押すと背景画像１がフェードしながら呼び込まれ、リンク２を押すと背景画像２が呼び込まれるといった感じです。このソースコードを使うに当たって問題が２つあり、初心者の自分では手直しできないためこちらに質問させていただきました。問題１，Firefox 4 では作動するのに、他のブラウザではうごかない。テスト済みブラウザ→ Chrome v.11.0, IE8, Safari 5 問題２、次画像のフェードインが、前画像のアウトの後にならないと読み込みが始まらない。これだとフェード時に画像が一時期消える（真っ白になってしまう）時間ができてしまうので出来れば次の画像をフェードなしでストレートに読込み、その上で前の画像をフェードアウトさせたいです。どなたか問題解決の手直し方法をわかる方がいらっしゃいましたらぜひ教えてください [code] sample

background1 background2 background3

[/code]

mikemike7 · Accepted Answer

>大きな背景画像のスイッチなのでそれだけタイムラグが発生するくらいの大きな画像だと枚数が増えれば増えるほどページの表示速度も遅くなるということだと思います。 >div を重ねたほうがいいのですね divで重ねなくても、No1で書いたように、ページを表示させた時に、1ピクセルにして表示するとか、visibility:hiddenで載せておくとかすれば、予め他の背景画像を読み込ませておけるので、すぐに表示されるようになります。まあ、乗りかかった船。せっかくだから載せておきます。いろいろ問題あって時間かかりすぎた＞＜ CSS部 #wrapper { position:relative; width: 100%; height:100%; } #container{ z-index:1; position:relative; width:1000px; height:1000px; } #img1{ position:absolute; width:100%; height:100%; background-image:url(img1.jpg); background-repeat:repeat; } JavaScript部 var thisbg = "img1"; $(function(){ $("#nav").find("a").each(function(){ if(this.rel == thisbg){return true;} $('

', { id: this.rel, css: { "position": 'absolute', "top": "0", "left": "0", "visibility": "hidden", "width": '100%', "height": '100%', "background-image": 'url('+this.rel+'.jpg)', "background-repeat": 'repeat' } }).appendTo('#wrapper'); }); $("#nav a").click(function(){ var val = this.rel; $("#"+thisbg).fadeOut(500, function(){ thisbg = val; $("#"+val).css({"display":"block","visibility":"visible"}); }); }); }); HTML部

background1 background2 background3

説明冒頭で書いたように背景画像が多くなればなるほどページ全体の読み込み速度は遅くなります。デフォルトの背景色以外は効率性も考え、JavaScript部分で読み込ませています。デフォルトの背景DIVは、レスポンスの為に予め設定しておく必要があります。指定は、CSS部の #img1{} とHTML部の

の部分です。

は必ずwrapper下に入れておいて下さい。あとの必要なDIVは、JSが

の中に入っているa要素を調べて書き出してくれるので、設定は

の中にAタグを入れるだけです。いくらでも増やせます。 z-indexで切り替えということでしたが、fadeOutにしたら不可視になるので、手間は同じだし、背景画像でもし透過画像（jpgなのでないでしょうが）を使われたりしたらおかしなことになると思うので、z-indexでの切り替えはしていません。検証 IE7,IE8,FireFox,Safari,Opera,クローム #IE6は背景が縮まったままになります。解消できなかった＞＜では！

mikemike7 · Answer

>質問１質問の回答の前に余談を。サンプルソースを書く前に display: none visibility: hidden の挙動を検索しました。ですが、詳しく書いているページが見つからなくて、不可視にした際に、画像を読み込んでくれるのか、読まないのかわかりませんでした。そこで、ログ出力するPHPを作って、

に背景画像として作ったPHPを入れ、display: noneをした時にログ保存されるかどうかを実験しました。結果、IE8、FireFoxはOKでした。 Operaを試した時に、ログ保存されませんでした。つまり背景画像にアクセスしていない。ここでdisplay: noneの検証は終了次に同じようにvisibility: hiddenを検証。全てのブラウザでログ保存されたことから、visibility: hiddenの場合は不可視にしても中身を読み込んでいることが確認できました。だから、今回は、display: noneではなく、visibility: hiddenを使っています。質問１を解決する前に質問２をまず答えます。 >質問２ $("#nav").find("a").each(function(){ で

内にあるAタグを抽出し、それらのAタグをfunction(){}に入れて（ループして）います。 if(this.rel == thisbg){return true;} は、デフォルトのIDだったらすでに指定されているので処理をしないで次に回しています。 $('

', { からの記載は、まず、'

'で空要素のDIVを生成しています。と同時にIDやCSSを付与し、#wrapperの中に放り込む作業をしています。つまり、手作業でHTMLに書き出したことをJavaScriptでやらせているわけです。背景画像変えたくなったらタグだけ追加とか変えるとかすればいいので便利でしょ＾＾ >質問３ブログとかで
とかってしているの見たことないです？とか。 HTMLは詳しくないので、自信ないですが、タグは開始されたら閉じるものですよね。それを同時にするのが />かと＾＾つまり、

と同じ役割というところですね。開始されてないのに、

にしたらおかしいでしょ。 >再び質問１質問２と質問３の項目でimg1と同じようにimg2,img3も生成されたことはわかりましたね？ $(function(){ 省略 }); の処理が終わった時点で、#wrapper下には

とともに

が自動で生成されているわけです。だから、img1のようにimg2とかimg3を手作業で設定する必要はありません。通常のタグをHTMLとして書き出した時に、visibility: hiddenとしても、要素内を取得してくれるわけですから、新たに要素を追加した場合でも設定されている背景画像は読み込まれる（と思います）ここまでは検証してないですが＾＾；まあ、背景画像切り替え時にタイムラグがあるとしたら読み込んでない可能性があるので、言って下さい。もう一度検証してみますので。うまく読み込んでいるとは思うんですけどね。

fujillin · Answer

画像が大きいのでしょうか、読込みに時間がかかるのが原因かと想像されます。

バックグラウンドの背景を切り替える方式だと、切り替えてから読込みが始まるのでご質問のようなことが起こる可能性はあります。
これをできるだけ避けるためには、最初に必要な数だけそれぞれの背景のdivなどを用意しておいて、重ねて表示しておくなどとして、切り替えるときは背景を変えるのではなく、そのdivの重なり順を変更することで背景を切り替えたように見せればよいのではないでしょうか。

ページロード時に各背景の読込みが終了すれば、それ以後はスムーズに切り替えられるはずと思います。

mikemike7 · Answer

>あくまで任意の透過度になるまでは次の画像を読み込んでくれません・・まあ、そういう設定ですしね。 >素人考えですが、function　をふたつにわけて、ひとつは次画像を読み込み、 >同時にもうひとつはフェイドアウト、というような形にできないでしょうか今の状態なら無理だと思いますよ。ひとつしか指定できないもの(背景画像)を、２つにすることはできません。やるとするなら、 #wrapper の上の階層にもうひとつDIVを作り、そこで新たな背景画像を挿入するくらいですかね。流れとしては、 1.上の階層の新背景画像を挿入。 2.wrapperのフェードアウトを開始。 3.wrapperのフェードアウトが終了。 4.wrapperに新背景画像を挿入し、可視とする 5.上の階層の背景画像を削除

　（省略）

>firefox 以外のブラウザではスクリプトを読んでくれません完全に同じではないですが、私の環境ではFF以外でも動いています。 IE8、IE7、IE6、Opera、クローム、Safariで検証済み

mikemike7 · Answer

>フェード時に画像が一時期消える（真っ白になってしまう）時間ができてしまう
画像の読み込みは環境によって違いますが、必ず読み込みに時間がかかるので、こういった症状は防げないように思います。
この読み込み対策として、アクションをさせるページで変更させる画像を予め読み込ませておくと良いかもしれません。

さて、本題ですが、上記の読み込み時の画像表示までのタイムラグによる白くなる状態はないという前提として、
今回の質問者さんが抱える問題としては、完全に不可視にしているから問題があるように思います。

設定した透過度にし、新たな画像に切り替え、透過度を元に戻せばうまくいくと思います。

つまり、
layer.fadeOut(500, function(){
layer.css("backgroundImage", "url(img/"+val+".jpg)").fadeIn(500);
});
を
layer.fadeTo(500,0.3,function(){
layer.css("backgroundImage", "url(img/"+val+".jpg)").fadeTo(500,1);
});
とすることで、目的の挙動になるのではないかと思います。
透過度を変えたい場合は、0.3で指定している引数を変更して下さい。

js、 jQuery の手直しを助けてください

>大きな背景画像のスイッチなので

この回答への補足

>質問１

画像が大きいのでしょうか、読込みに時間がかかるのが原因かと想像されます。

>あくまで任意の透過度になるまでは次の画像を読み込んでくれません・・

>フェード時に画像が一時期消える（真っ白になってしまう）時間ができてしまう

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング