imagesLoadedで画像の読み込み時になんかする (祝・背景画像対応)

Webサイトを作っていると、画像の読み込み完了を待ってなにかする、という実装をよくします。
僕は面倒なのでimagesLoadedをいつも使うんですが、いつの間にか背景画像にも対応していて、さらに便利になった印象です。

参考：imagesLoaded gets backgrounds · Metafizzy blog

書き方

jQueryと一緒に使う場合

$('#container').imagesLoaded({background: true}, () => {
  console.log('背景画像が読み込まれたよ！');
});

jQuery使わない場合

imagesLoaded(document.getElementById('container'), {background: true}, () => {
  console.log('背景画像が読み込まれたよ！');
});

と、こんな感じで書けます。便利ですね！

補足：Browserify/Webpack環境でimagesLoadedを使う場合

Browserify/Webpackでimagesloadedを使用する場合は、以下のように書きます。

jQueryと一緒に使う場合

まず、imagesLoadedとjQueryをインストール。

$ npm install imagesLoaded jquery --save

そして、imagesLoadedを使いたい箇所で以下のようにします。

window.jQuery = window.$ = require('jquery');
const imagesLoaded = require('imagesloaded');
imagesLoaded.makeJQueryPlugin($);

$('#container').imagesLoaded(() => {...});

jQuery使わない場合

まず、imagesLoadedをインストール。

$ npm install imagesLoaded --save

そして、以下のようにします。

const imagesLoaded = require('imagesloaded');

imagesLoaded(elem, () => {...});

まとめ

背景画像の読み込み完了の検知、諦めていたのでimagesLoadedが対応してくれて、ありがとうの生まれる光…🙏という感じです。

あんまりソースは読めていませんが(読めるだけのJS力がない…😇)、ダミーのimage要素を作って、そのsrcに背景画像のパスをセット→そのimage要素の読み込み完了する=背景画像の読み込みが完了する、というような実装っぽいです。こういう面倒な処理をいい感じにやってくれるのは助かります。ライブラリ自体もMinify時で5KBほどだし。