なる研>JavaScript小品集>画像びゅーあ4

画像びゅーあ4

「画像びゅーあ3」の改良版です。 ロード時にJavaScriptがDOMを手繰ってHTMLを書き換える仕組みを追加したので、 「onClick="View('hoge.jpg');"」の記述が不要になりました。 これにより、ファイル名を2度書くわずらわしさを解消しました。 さらに「画像びゅーあ3」のインターフェース(onClick="view('hoge.jpg');")も利用できるので jsファイル を上書きしてしまえば移行が完了します。

サンプル

ダウンロード

使い方

Imageオブジェクト

画像のサイズ情報は本質的にサーバサイドで用意する必要があります。 画像のサイズをImageオブジェクトから取得することも可能ですが、 画像のサイズをImageオブジェクトから取得するにはブラウザがその画像の読み込みを完了していなければなりません。 このため、completeプロパティをsetTimeoutメソッドなどでポーリングすることになります。 リンクをクリックした瞬間から窓が開き 徐々に画像が表示されてゆくようなスクリプトを実現するためには、 画像の読み込みが完了する前にサイズを設定しなければなりません。 したがって、画像のサイズ情報はサーバサイドで用意して画像とは別にブラウザへ転送する必要があります。 以下にImageオブジェクトを使用した例を示します。 ブロードバンド回線では違いがわかりにくいかもしれませんが、反応が鈍く感じられると思います。

そんなわけで「画像びゅーあ4」ではあえてHTMLの中に画像サイズを書き込むという方法をとっています。



<<JavaScript小品集へ戻る
Since 2007/01/06
LastUpdated 2007/05/25
Copyright 2007 Naru
 今日  昨日