HTMLの画像を最初にロードしようと思います

質問

WEBページで画像の掲載ページを作成しています。
サムネイルにマウスオーバーすると指定場所に
画像をプレビュー表示する仕組みです。
しかしマウスオーバーした際に初めて画像のロードを開始するため、
一つオーバーする度に数秒ロードする時間があり、あまりサクサク見れない状態です。
この回避方法として、ページのはじっこに1px * 1pxで見えないように
全ての画像を設置しておき、ページを開いた際に
あらかじめ全ての画像をロードしておこうかと考えています。

これについて質問なのですが

(1)この方法に何かデメリットはあるのか？
→自分で試してみたところ特にデメリットは感じず
　想定通りマウスオーバー後のロードが早くなりました。

(2)このほかに（もっといい方法が）あるのか？
→今の時代こんなアナログな方法よりも
　あらかじめ全ての画像を読み込むようなタグがありそうな気もします・・。

公開時期が割りと迫っているため、
とても困っているに設定しました。
よろしくお願いします。

回答No.2

ORUKA1951 · ベストアンサー

・その度に画像を編集するのは少々効率が悪いように感じます…。
　その点では効率が悪いです。

・また、1枚物の巨大な画像ということですと、逆に言えばその1枚の読み込みにかなり時間がかかってしまうことはデメリットのように感じます。
　javascriptと異なり、画像をすでに読み込んでいるので動作は速いはずです。また、一枚よりは連結したほうが総サイズは小さくなります。
●事前にファイルを読ませておく前提だと、スタイルシートのほうが効率的です。

・サムネイルにそのまま画像を読み込ませる手段は
　これが一番早いです。
　先のサンプルを次のように変更する。
＿＿<li><a href=""><img src="images/01.jpg" alt="あいう" width="80" height="51"></a>
＿＿＿<ul>
＿＿＿＿<li style="background-image:url(images/01.jpg)"><span>あ行の文字です。</span></li>
＿＿＿</ul>

下記を削除
ul.album ul li{
background-image:url(images/full.jpg);
}

・画像を読み込み用として隠し画像という形にしていて、
　その画像にリンクを張っていれば、『隠しテキストと隠しリンク ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=66353 )』に該当する可能性も・・

回答No.4

aspnet

いったん画面表示を行ってから、ロールオーバー用画像読込みを行えばいいんではない？

以下のJavaScriptを、htmlの末尾とか、jQueryの$(function(){})に実行文として書いておけば、画面表示を先に行い、遅延して先読を行う、と思う。表示も速いし、先読みもしっかり行われる。

var imgArray = [
"img1.jpg",
"img2.jpg",
"img3.jpg"
]
for (var i= 0 ; i < imgArray.length;i++){
var image1 = new Image();
image1.src = imgArray[i]; // srcプロパティ設定->読込実行
}

いきなりマウスオーバされれば、先読みが完了していないのでアレですが、最初の閲覧でそんなことは稀だし、２回目からはキャッシュが効くので読み込みは瞬時に終了する、と。

こんなんじゃ駄目ですか？

回答No.3

noname#158634

(1)最初に全部読み込むのだから当然その分は遅くなる
(2)「タグ」はありません。HTMLはそんなことに使うものではないから。ただし、Javascriptを使っていいのであれば先読みすることで「あらかじめ全ての画像を読み込む」ことはできます。「1px * 1pxで見えないように」なんていう怪しい方法はとらずに済みますが、当然(1)と同様です。

なお、「マウスオーバーごとの読み込み」と「最初に全部読み込み」は普通の方法では完全にトレードオフです。というか理論上このどちらでもない方法でロールオーバー時の画像を表示することはできないといったほうがいいか。
それからちなみに、何百枚何千枚と画像があるのでもない限り「あらかじめ全ての画像を読み込む」ことによる時間差は無視できるほど小さいものですので問題になりません。(1)でご自身で退官した通りです。

回答No.1

ORUKA1951

隠し画像はSEO的にもまずいので、その場合は、画像を一枚にしておきます。
a.jpg～d.jpgの４枚がそれぞれ480px×360pxの画像だとすると、それを一枚の1,920px×360pxにしておきます。
その上で、画像をずらして表示する。
シンプルな方法です。

＿<ul class="album">
＿＿<li><a href=""><img src="images/thumbnail/01.jpg" alt="あいう" width="80" height="51"></a>
＿＿＿<ul>
＿＿＿＿<li style="background-position:0 0"><span>あ行の文字です。</span></li>
＿＿＿</ul>
＿＿</li>
＿＿<li><a href=""><img src="images/thumbnail/02.jpg" alt="かきく" width="80" height="51"></a>
＿＿＿<ul>
＿＿＿＿<li style="background-position:480px 0"><span>か行の文字です。</span></li>
＿＿＿</ul>
＿＿</li>
＿＿<li><a href=""><img src="images/thumbnail/03.jpg" alt="さしす" width="80" height="51"></a>
＿＿＿<ul>
＿＿＿＿<li style="background-position:960px 0"><span>さ行の文字です。</span></li>
＿＿＿</ul>
＿＿</li>
＿＿<li><a href=""><img src="images/thumbnail/04.jpg" alt="たちつ" width="80" height="51"></a>
＿＿＿<ul>
＿＿＿＿<li style="background-position:1440px 0"><span>た行の文字です。</span></li>
＿＿＿</ul>
＿＿</li>
＿</ul>

[CSS]
ul.album,ul.album li,ul.album li ul,ul.album li ul li{display:block;list-style:none;margin:0;padding:0;}
ul.album{
position:relative;
width:650px;height:400px;
margin:0 auto;
border:solid 1px gray;
}
ul.album ul{
position:absolute;
right:0;top:0;
width:480px;height:360px;
}
ul.album ul li{
background-image:url(images/full.jpg);
}
ul.album ul li span{visibility:hidden;}
ul.album li ul li{display:none;}
ul.album li:hover ul li{display:block;width:100%;height:100%;}
}

★時間がないのでしたら、サムネイル自身に本物画像を縮小して表示すると言う手もある。どうせ大きな画像を読ませるなら・・

お礼

お早いご回答ありがとうございます。
なるほど！そうゆうやり方もあるんですね。
確かの他のサイトでJSを使って
1枚物のサムネイルを流しているのをよく見るような気がします。
しかし以下の点が気になりました。

・現在作成しているものは追加で画像が増えていく可能性が高く、
　その度に画像を編集するのは少々効率が悪いように感じます…。
　（書いてなくてすみません）

・また、1枚物の巨大な画像ということですと、
　逆に言えばその1枚の読み込みにかなり時間がかかってしまうことは
　デメリットのように感じます。
　（1枚ずつ配置していればバラバラに読み込むのでその問題がない）

にしてもそれが一般的なのでしょうかｗ

サムネイルにそのまま画像を読み込ませる手段は
最初にやってみたのですが、マウスオーバーにCSSで効果をかけていたため
やたら重くなってしまいました。
（元が大きな画像に効果をかけているためだと思います）

あとSEO的な部分はあまり詳しくないのですが、
画像を読み込み用として隠し画像という形にしていて、無関係なものではなく
あくまで実際に掲載しているものなのであまり問題がないのかなと思っていました。