※ ChatGPTを利用し、要約された質問です（原文：画像の先読み）
画像の先読みと拡大表示
このQ&Aのポイント
画像の先読みと拡大表示を実装していますが、動作が不自然です。
クリックするとフェードインした後、切り替わる前の画像が1秒表示されます。
キャッシュの問題かと思いましたが、どのように対処すれば良いでしょうか。
画像の先読み
拡大画像の表示場所とサムネイルの表示場所がありサムネイルをクリックすると拡大画像の場所にクリックしたサムネイルが拡大表示されるものを作っています。
以下のソースで試しており動作は問題ないのですが動作がぎこちないです。
具体的にはサムネイルをクリックすると拡大画像の場所がフェードアウトしフェードインします。
※ここまでは正常
フェードインしたかと思いきやクリックする前の画像が1秒程表示されその後クリックした画像に切り替わる感じでフェードの効果が全く無意味になってしまいます^^;
事情があり画像の出力をphpで行っているのが原因かと思ったのですが単純にキャッシュの問題かとも思い画像の先読みなどを組み込めればいいのですがどのようにすれば可能でしょうか？
[html]
<p id="imgMain"><img src="resize.php?file=/imgimg01.jpg" alt="" id="target" /></p>
<ul id="gallery">
<li><a href="resize.php?file=/img/img01.jpg" ><img src="resize.php?file=/img/img01.jpg&x=173" alt="" /></a></li>
<li><a href="resize.php?file=/img/img02.jpg"><img src="resize.php?file=/img/img02.jpg&x=173" alt="" /></a></li>
<li><a href="resize.php?file=/img/img03.jpg"><img src="resize.php?file=/img/img03.jpg&x=173" alt="" /></a></li>
</ul>
[js]
$(document).ready( function()
{
$("#gallery a img")
.fadeTo(1, 1)
.hover(
function()
{
$(this).fadeTo(200, 0.5);
},
function()
{
$(this).fadeTo(500, 1);
}
)
$("#gallery a").click(function()
{
var changeSrc = $(this).attr("href");
$("#target").fadeOut(
"slow",
function()
{
$(this).attr("src", changeSrc);
$(this).fadeIn();
}
);
return false;
});
});
補足
お返事ありがとうございます。 >スクリプトを使わなくても・・・ jsがわからなかったので考えた手ではあるのですが cssでdisplay:noneを設定しておくという事でしょうか？