- 2007-06-14 (木) 22:12
- 技術
サムネイル画像をクリックすると、その画像を特定の場所に表示する。ってヤツをJavaScriptで作ってました。切り替えの肝となる部分は以下のようなコードです。
実際には、エラー処理や、アスペクト比を保持したまま拡大縮小するコードなど含まれているのですがここでは省略します。
このコードはFireFox2.0やIE7では問題なく動作するのですが、IE6では動作したりしなかったり安定しない感じでした。
色々コードの形を変えて試した感じだと、img.srcへの代入が非同期で行われ、画像読み込みが完了する前に関数を抜けると画像が切り替わらないというのが原因だろうと思いました。もっと違う理由かもしれませんが。
この問題に対し、Imageクラスを使用しあらかじめ画像を読み込んでおくという、本来は画像切り替えのタイムラグを減らすために利用されるテクニックが有効かなと最初思ったのですが、ローカルキャッシュからの画像の読み込みに時間が掛かれば(ブラウザ以外で重い処理を行ってるとか)、同じ問題が発生する可能性があるので、違う解決法を考えました。
Imageオブジェクトにはcompleteプロパティというものがあり、画像の読み込み中はfalseを返すようになってます。そのプロパティをsetIntervalでチェックするようにしました。
具体的には以下のとおりです。
今書いてて思ったのですが、Imageクラスを使用しあらかじめ画像を読み込んでおく方法と変わらないような気が・・・
まぁ、サーバ側でhtmlを動的に生成してる場合で、画像切り替えのJavaScriptを外部ファイルにしてる場合、このファイルへの追記のみで対応可能なところがメリットでしょうか。
画像をあらかじめ読み込む方法だと、JavaScriptファイルを読み込んでる元のHTMLに手を加えないと普通に作ってる分には難しいので。(HTML以外のファイルもサーバ側で動的に生成するのは管理コストが高くなりやすい)
function changeImage(image_url, image_tag_id){
var img = document.getElementById(image_tag_id);
img.src = image_url;
}
実際には、エラー処理や、アスペクト比を保持したまま拡大縮小するコードなど含まれているのですがここでは省略します。
このコードはFireFox2.0やIE7では問題なく動作するのですが、IE6では動作したりしなかったり安定しない感じでした。
色々コードの形を変えて試した感じだと、img.srcへの代入が非同期で行われ、画像読み込みが完了する前に関数を抜けると画像が切り替わらないというのが原因だろうと思いました。もっと違う理由かもしれませんが。
この問題に対し、Imageクラスを使用しあらかじめ画像を読み込んでおくという、本来は画像切り替えのタイムラグを減らすために利用されるテクニックが有効かなと最初思ったのですが、ローカルキャッシュからの画像の読み込みに時間が掛かれば(ブラウザ以外で重い処理を行ってるとか)、同じ問題が発生する可能性があるので、違う解決法を考えました。
Imageオブジェクトにはcompleteプロパティというものがあり、画像の読み込み中はfalseを返すようになってます。そのプロパティをsetIntervalでチェックするようにしました。
具体的には以下のとおりです。
var imgtmp;
var img;
function changeImage(image_url, image_tag_id){
imgtmp = new Image();
imgtmp.src = image_url;
img = document.getElementById(image_tag_id);
setInterval(waitImageLoading, 500);
}
function waitImageLoading(){
if(imgtmp.complete){
img.src = imgtmp.src;
clearInterval();
}
}
今書いてて思ったのですが、Imageクラスを使用しあらかじめ画像を読み込んでおく方法と変わらないような気が・・・
まぁ、サーバ側でhtmlを動的に生成してる場合で、画像切り替えのJavaScriptを外部ファイルにしてる場合、このファイルへの追記のみで対応可能なところがメリットでしょうか。
画像をあらかじめ読み込む方法だと、JavaScriptファイルを読み込んでる元のHTMLに手を加えないと普通に作ってる分には難しいので。(HTML以外のファイルもサーバ側で動的に生成するのは管理コストが高くなりやすい)
- 次の記事: mod_rewriteでの動的ページURL書き換えはSEO的に有効か?
- 前の記事: ALL SAINTS
コメント:0
トラックバック:0
- トラックバック用URL
- http://peta.okechan.net/blog/archives/62/trackback
- リンク元
- IE6でJavaScriptによる画像切り替えがうまく動かない ← 日曜研究室 〜技術的な日常〜