今回はタイトルの件についてその実装をつらつら書いていこうと思います。
実装
HTML
1 |
<div id="background-image-test-content"></div> |
CSS
1 2 3 4 5 |
#background-image-test-content { height: 150px; width: 150px; background: no-repeat center #eee; } |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 |
window.addEventListener('DOMContentLoaded', (event) => { // 実行したい処理 console.log(`DOMContentLoaded: ${new Date().getMilliseconds()}`) let image = new Image(); const src = "https://placehold.jp/e60613/ffffff/150x150.png?text=画像"; image.addEventListener('load', function() { document.getElementById("background-image-test-content").style.backgroundImage = 'url(' + src + ')'; console.log(`image load completed: ${new Date().getMilliseconds()}`) }); image.src = src; }); |
See the Pen background-image 読み込み完了検知 by 10K (@10JII_K) on CodePen.
解説
ネットによくあるimage読み込み検知の実装では、- image の data-src属性 と src属性 を活用
- addEventListner と load イベントを組み合わせて検知
その時は、
- メモリ上に新しい画像を作成する(new Image)
- 1. で作成した Image に load イベント を探知させ、読み込み完了後に背景画像をセットする
loadイベントは 「ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生する」ので、こちらのイベントにより画像読み込みを探知できます。
つまり何をやっているかと言うと、background-image単体で読み込み検知するのではなく、「検知用のImageオブジェクトに読み込みを検知させる」という感じですね。
背景
業務のとあるタスクで、画像の読み込み時間を測定する機会がありました。「画像読み込み測定? 対象のimage 要素 にloadイベントくっつけて楽勝っしょ!」
って思っていたら、 background-imageを使用しているケースでした。
このケースではどうやるんだろう?と思ったら、background-imageそのものを使ってどうのこうのするのではなく、代わりに検知用のImageオブジェクト使って検知するとうまくいくみたいです。
同じ境遇に出会われた方のお役に立てると嬉しいです。