画像のランダム表示が遅い？

質問

こんにちは。
ページのメイン画像（横750px、縦250px）を
リロードするたびに変化させるという仕組みをjavascriptを使い
ページに組み込んでいるのですが、リロードするたびに画像は
確かに切り替わるのですが、表示速度が以上に遅いのです。。。

サッと画像が出てくるようにするためには、なにか方法が必要なのでしょうか？

写真枠のHTMLはこうなっています。

<div id="main-pictures">
<script src="js/reloads.js" type="text/javascript"></script>
</div>

そもそもこのような書き方がいけないのでしょうか？

ご教授いただけませんでしょうか。お願いいたします！

回答No.2

fujillin · ベストアンサー

ANo1様の回答そのままですが・・・

表示に時間がかかるのは、画像データを読み込む時間だと想像されますが、通信速度と画像のサイズにもよります。
通信速度はしかたがないとして、画像のサイズを表示の密度と同等にしておくことや、画像形式を選択することにより画像ファイルを小さくしておくことなどで、読み込み時間を最小に押えるという方法がまず考えられます。
（限界はありますが）

その他の方法として、最初にページを表示した時に、同時にバックグラウンドで表示しない画像も読み込んでおくことで、次回からの（キャッシュにあるので）読込みの時間をカットするという方法があります。（ANo1様の回答）

ご質問の内容から察するに、意味が伝わるかどうかわかりませんが、現在の方法はonload時に乱数で表示画像を選択するなどの方法だと思いますので（タグの記載位置からすると、じかにイメージタグを出力しているのかも・・）、その際に表示しないイメージもロードするようにしておけば良いかと思われます。

以下のＵＲＬをご参考に。
　http://www.umechando.com/tips/15.htm

お礼

fujillin様

こんにちは。はじめまして。
画像サイズは確かにかなり大きくて。。。
バックグランドで表示しない画像を読み込む方法をとると
確かに、リロード時の表示速度は速くなりました。

大変助かりました。ありがとうございます！

回答No.1

yambejp

imageオブジェクトで一度読みこんでしまえばキャッシュしてスピードは
あがるとおもいます。

補足

yambejp様

こんばんは。はじめまして。
それは、HTML上に記述するのですか？
javascript内に記述するのですか？

無知故の無礼な質問かとは思いますがお教えくださいませんでしょうか。

よろしくお願いします！