background-imageの読み込み完了を検知する

こんにちは。22新卒GMOアドマーケティングの天河です。
今回はタイトルの件についてその実装をつらつら書いていこうと思います。

実装

HTML

CSS

JavaScript

See the Pen background-image 読み込み完了検知 by 10K (@10JII_K) on CodePen.

解説

ネットによくあるimage読み込み検知の実装では、

  1. image の data-src属性 と src属性 を活用
  2. addEventListner と load イベントを組み合わせて検知
という手法がありますが、これがもし background-image で対応する場合、どうなるのでしょうか。
その時は、

  1. メモリ上に新しい画像を作成する(new Image)
  2. 1. で作成した Image に load イベント を探知させ、読み込み完了後に背景画像をセットする
の手法を使います。
loadイベントは 「ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生する」ので、こちらのイベントにより画像読み込みを探知できます。
つまり何をやっているかと言うと、background-image単体で読み込み検知するのではなく、「検知用のImageオブジェクトに読み込みを検知させる」という感じですね。

背景

業務のとあるタスクで、画像の読み込み時間を測定する機会がありました。
「画像読み込み測定? 対象のimage 要素 にloadイベントくっつけて楽勝っしょ!」
って思っていたら、 background-imageを使用しているケースでした。

このケースではどうやるんだろう?と思ったら、background-imageそのものを使ってどうのこうのするのではなく、代わりに検知用のImageオブジェクト使って検知するとうまくいくみたいです。


同じ境遇に出会われた方のお役に立てると嬉しいです。

おわりに

これで最高のbackground-imageライフ!