ベストアンサー

画像のプリロード

2011/03/03 23:08

jqueryを使い、下のようなサイトを作っています。（URL先はサンプル） http://s1.shard.jp/studioy/test2/ 横に大きな画像を一枚使っており、ページを開くと同時に画像がスライドし、一番最後まで流れたらストップ、右側のリンクで希望の画像までスライドできるようになっています。動きに支障はないのですが、最初に読み込んだときに画像が完全に読み込まれておらず、徐々に表示されてしまいます。一応、jsでプリロードさせているのですが、環境によってなのでしょうか。 jsで読ませる他に、何か方法はないでしょうか？どなたか詳しい方、ご教示下さい。

studioy_new
お礼率50% (5/10)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2011/03/04 08:55 回答No.1

いわゆるプリロードは 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文書として倫理的な問題があると思います。

質問者

お礼 2011/03/04 13:47

回答ありがとうございます。補足に書いたようなコードでいいでしょうか？

質問者

補足 2011/03/04 10:49

回答ありがとうございます。実際は他にも複数画像があるので、こうなるでしょうか。 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()"> ～

ログインすると、全ての回答が全文表示されます。