1つの画像の先読みが完了したら何か処理する

1つの画像の先読みが完了したら何か処理するサンプルを見てみます。以下のようになります。

.on()ではなく、.one()を使うようにしています。また、.attr()する前に、イベントを付与しています(理由は後述)。画像読み込みにjQueryではなく、Imageオブジェクトを使う場合は、以下のようになります。

こちらも.src = を設定する前にイベントを付与しています。jQuery方式の場合もそうですが、これは、IE8以下対策です。WEBで検索すると色々出てきますが、IE8以下だと画像のキャッシュがある場合は、同期処理されてしまうようで、イベントの付与タイミングを後にしてしまうと、正常にイベントが発生してくれません。また、私が試したところ、jQuery方式で.on()でイベントを設定すると、なぜかイベントが2回発生してしまうので、.one()で対応しています。しかし、.attr()を使わず、直にimgタグ内にsrc属性を指定する場合は、.on()で大丈夫だったりします。と、jQuery方式の場合、IE8以下の挙動が少し分かりにくい所があるので、Imageオブジェクトを使った方が得策のようです。

もしそれでも、「いや、IE8以下だとImageオブジェクトでもうまく行かないよ」という場合、以下のようなキャッシュ対策も考えられます。

$.now()は、jQueryのユーティリティ関数で、(new Date).getTime()と等価になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です