こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

画像の先読み

画像の先読み

拡大画像の表示場所とサムネイルの表示場所がありサムネイルをクリックすると拡大画像の場所にクリックしたサムネイルが拡大表示されるものを作っています。

以下のソースで試しており動作は問題ないのですが動作がぎこちないです。

具体的にはサムネイルをクリックすると拡大画像の場所がフェードアウトしフェードインします。
※ここまでは正常

フェードインしたかと思いきやクリックする前の画像が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&amp;x=173" alt="" /></a></li>
<li><a href="resize.php?file=/img/img02.jpg"><img src="resize.php?file=/img/img02.jpg&amp;x=173" alt="" /></a></li>
<li><a href="resize.php?file=/img/img03.jpg"><img src="resize.php?file=/img/img03.jpg&amp;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;
});
});

投稿日時 - 2010-06-22 02:20:08

QNo.5986010

困ってます

質問者が選んだベストアンサー

使う可能性のある画像を、imageオブジェクト(←表示しない)に先に読込んでおけば良いだけです。
実際に使用するときにはキャッシュが利用されるので、速いという仕組み。
ぐぐればたくさん情報が見つかるはずです。
 http://www.bing.com/search?q=%E7%94%BB%E5%83%8F%E3%80%80%E5%85%88%E8%AA%AD%E3%81%BF&go=&form=QBRE&filt=all

確認はしてませんが、スクリプトを使わなくても、画面上の見えないところに通常のHTMLで表示させておいても(←実際には見えない)、同様のことが可能かと思います。

投稿日時 - 2010-06-22 09:38:19

補足

お返事ありがとうございます。

>スクリプトを使わなくても・・・
jsがわからなかったので考えた手ではあるのですが
cssでdisplay:noneを設定しておくという事でしょうか?

投稿日時 - 2010-06-22 18:14:11

このQ&Aは役に立ちましたか?

9人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問