スポンサーリンク
スポンサーリンク

画像を読み込んでみる

javaScript

javaScriptでは、HTMLの<img>タグで書いた画像をImageオブジェクトとして扱います。それぞれの画像には<img>タグのname属性で設定した名前を使って「document.名前」としてアクセスします。

サンプルコードの実行結果はこちら

srcプロパティ

imageオブジェクトが管理する画像ファイルへのパスは、srcプロパティに格納されています。これはimgタグのsrcに属性に対応するものです。

srcプロパティの値を、別のイメージのパスに変更することにより、下記のように画像を切り替えることができます。

変数numが2の場合、右辺は「img/2.jpg」というパスとなり、srcプロパティに代入されます。

自分自身を示すthis

thisは、オブジェクトが自分自尊を示す特殊な値です。

thisのsrcプロパティに「img/3.jpg」を代入しています。thisはその画像自身になります。ちなみに以下のように書いても大丈夫です長くて分かりにくいですが・・・

Imageオブジェクト生成

new演算子とImageコンストラクタを使い、Imageオブジェクトを生成することができます。引数には幅、高さを指定します。

Imageオブジェクトを生成した後、srcプロパティに画像へのパスを設定すれば
画像が読み込まれます。

画像のプリロードってなに?

たまにネットワーク速度が遅いときに、画像の読み込みに時間がかかってイライラすることがあります。それを避けるためには、onloadイベントパンドラから関数を呼び出し、その関数でImageオブジェクトを生成して、srcプロパティに画像へのパスを代入します。
こうすることで、画像がウェブブラウザのキャッシュに読み込まれて、画像の表示が速くなります。この仕組みを、画像のプリロードといいます。

コメント

タイトルとURLをコピーしました