jQueryのfadeToの動きが変（サーバ上）

質問

サムネイル画像をクリックするとメイン画像にそれを映し出し
そのメイン画像が指定した時間で薄っすらと表示されるような効果のイメージギャラリーをjQeryを使って制作しています。
jQueryバージョン：jquery-1.7.2.min.js

※（薄っすらと表示される効果：jqueryにてメイン画像のopacityを0→1)に変化させて実現しています

【問題点】
ローカルＰＣ上でテストすると意図する動作をするのにサーバ上にデータをアップしてテストすると
メイン画像の移り変りにブラウザ起動後、初回サムネイルをクリックしたときのみ遅延が発生し、JqeryのfadeToも効きません。
何かjQueriのfadeto関係などソースに問題があるとか、これはキャッシュの問題で仕方ないとかあればご指導のほどよろしくお願いします。

【問題点詳細】

しかし、自分のパソコン内（ローカル環境）で動作させてみると意図したとおりになるのですが、
データをレンタルサーバ上にアップし、確認してみると、サムネイルをクリックすると
jqueryのfadetoの（opacityを０から１にする部分）動作がおかしくなります。

ブラウザを起動し初回サムネイルをクリックしたときのみ、メイン画像が前の残像が残り（遅延発生）し、fadetoの（opacityの変化）が聞かなくなります。

【状況整理】

１．どのＰＣでもローカル環境（自分のＰＣ内）でテストすると意図する動作をする。
２．レンタルサーバ上だと、ブラウザを起動後、初回サムネイルをクリックしたときのみおかしい動作をする。（メイン画像の切り替わりに遅延が発生する（fadetoも効かない））
３．ブラウザを閉じない状態で、同じサムネイルをクリック（２回目）すると意図する動作をする。

※２．３を考えますと２回目以降クリックしたときに大丈夫なのは１回目クリックしたときに取得したメイン画像のキャッシュがブラウザに保存されているからだと思います。
またローカルだと大丈夫なのはメイン画像取得する時間（ダウンロードがない）から
じゃないかな？とも思います。
メイン画像に使っているそれぞれのファイルサイズは80KBと軽いです。

またIE 8/9でもfirefox12でも同じ状況です。

■HTMLソース（XHTML)

<div id="carousel">
<!--メイン画像-->
<div><img src="img/main.jpg" alt="" class="main_img"/></div>

<!--サムネイル画像-->
<div class="anyClass">
<ul>
<li><a href="img/photo1.jpg"><img src="img/photo1_thumb.jpg" alt="" /></a></li>
<li><a href="img/photo2.jpg"><img src="img/photo2_thumb.jpg" alt="" /></a></li>
<li><a href="img/photo3.jpg"><img src="img/photo3_thumb.jpg" alt="" /></a></li>
</ul>
</div>

</div>

■Javascript(jQuery)

$(function() {

$("#carousel .anyClass a").click(function(){

$("#carousel .main_img").css("opacity",0);　←いったんメイン画像のopacityを０に落とす
$("#carousel .main_img").attr("src",$(this).attr("href"));　←メイン画像のＵＲＬにセット
$("#carousel .main_img").fadeTo("normal",1);　←メイン画像のopacityを１に変化
return false;
});

});

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

>【状況整理】
たぶんその通りで、
画像が読み込まれないままfade inしてるんじゃないでしょうか。

opacity:0から0.9くらいの状態で画像が読み込まれていないと、全く表示されません。
そのままopacity:1になり、その後で画像が読み込まれると、opacity:1の状態で表示されますから、
fade inが効いていないように見えます。

リサイズや移動などでも同じですが、画像の読み込みを待つようにしてみてはいかがでしょうか。
低レベル（ライブラリ未使用）の書き方は、以下のような感じで行けると思います。

var img=document.createElement('img');
img.onload=function(){ /*表示処理*/ $("#carousel .main_img").attr("src", this.src); };
img.setAttribute('src', 'img/photo1.jpg');

なお、IEはsrcの書き換えではonloadイベントを再発行しません。
img要素を作るのはその対策です。

jQueryを使った書き方はわかりませんので、質問者さんか、他の人にお任せします。
もしくは、thickboxなどには画像の読み込みを待つ処理が書いてあると思いますし、それが参考になると思います。

お礼

大きなヒントありがとうございました。

画像の読み込みにタイムラグがあるのが原因とわかり、
ページが表示されたらメインに映し出す画像をjavascriptのプリロードすることで実装できました。
これでタイムラグがなくなりました。