画像のプリロード

解決済

質問者：studioy_new
質問日時：2011/03/03 23:08
回答数：1件

jqueryを使い、下のようなサイトを作っています。（URL先はサンプル）
http://s1.shard.jp/studioy/test2/

横に大きな画像を一枚使っており、ページを開くと同時に画像がスライドし、一番最後まで流れたらストップ、右側のリンクで希望の画像までスライドできるようになっています。

動きに支障はないのですが、最初に読み込んだときに画像が完全に読み込まれておらず、徐々に表示されてしまいます。

一応、jsでプリロードさせているのですが、環境によってなのでしょうか。

jsで読ませる他に、何か方法はないでしょうか？

どなたか詳しい方、ご教示下さい。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： taloo
回答日時：2011/03/04 08:55

いわゆるプリロードは

var img=new Image();
img.src='image.jpg';
のような形になっていると思いますが、
これは「画像の読み込みを開始せよ」という命令でしか有りません。

画像の読み込みが完了してからスライドを開始するようにすれば、画像の読み込み中が表示されることはなくなりますが、
ライブラリがその処理に対応していなければ、
・ライブラリを改造するか、
・対応しているライブラリに乗り換えるか、
・ライブラリを使わずに全て自作するか、
どれかになりますね。

img.onload=function(){}
img.onerror=function(){}
で読み込みが完了、中止したタイミングをチェックできます。
img.completeというプロパティで読み込みに成功したかどうかは確認できますが、（onloadでフラグを立てる代わりにimg.completeをフラグとして扱える）
ブラウザによって、読み込みに失敗したときに.completeをtrueにするかfalseにするかの違いがありますので、onerrorでもチェックした方が良いと思います。

> jsで読ませる他に、何か方法はないでしょうか？

画像の先読みそのものはHTMLを使って
<img src="" alt="" width="0" height="0" style="display:none">
でも可能です。
この方法なら、
window.onloadに影響します（画像の読み込み完了を待ちます）が、
jQueryの$(document).ready()は影響しません（画像の読み込み完了を待たずに実行します）。
jQueryプラグインなら$(document).ready()を使っていると思いますので、どちらにしても改変が必要になると思います。

また、文書と直接関係ないタグを使うことになると思いますので、HTML文書として倫理的な問題があると思います。

この回答への補足

回答ありがとうございます。

実際は他にも複数画像があるので、こうなるでしょうか。

function check(){
　　　　flag=true;
　　　　for(j=0; j<document.images.length; j++){
　　　　　　　　if(document.images[j].complete==false){
　　　　　　　　flag=false;
　　　　　　　　}
　　　　}
　　　　if(flag==true){
　　　　b=1;
　　　　}
　　　　else{setTimeout("check()",200);}
}

<BODY onload="check()">

～