Javascriptってとっても便利です。
たくさんのフレームワークもありどんどん便利になっているし、実現できることが増えてきております。
でも、すごく便利ですが落とし穴があります。
その落とし穴は、読み込み順序です。
読み込みの順序によっては、動かないということは、JavaScriptを構築している方だったら、経験済みではないでしょうか？
それは、JavaScriptの実行の順番でもあり、HTMLや画像の読み込みにも影響がでてきます。
JavaScriptの順序であれば、コードの修正でおわりますが、HTMLや画像の読み込みが完了後にJavaScriptを実行するとなれば、いろいろと細工が必要になってきます。
そんな時に便利なのがこの「imagesLoaded」です。
この流れと名前を見ていただければどういったものかは、わかると思います。
その通りです。画像が読み込まれたら実行する！が実現できるのです。
あ、タイトルにすでにネタバレしてましたね。

準備

公式サイトより必要なファイルをダウンロードし、読み込みます。

<script src="Path/to/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="Path/to/imagesloaded.pkgd.js"></script>

CDN

CDNもあるようです。
CDNの場合は下記のどちらかを記述するだけです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.js"></script>

使い方

使い方はすごく簡単で、下記のどちらかをつかうだけです。

// Vanilla JS
imagesLoaded('#container', function(){
 //実行させたい処理
});

// jQuery
$('#container').imagesLoaded(function(){
 //実行させたい処理
});

シンプルに画像読み込み後に処理をするというだけならば、上記の形で大丈夫です。
イベントで使うこともできたりしますが、特にそういった使い方をすることは経験上少ないかなと思います。

あとは、背景の時は少し書き方が違います。

// jQuery
$('#container').imagesLoaded( { background: true }, function() {
 console.log('#container background image loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: true }, function() {
 console.log('#container background image loaded');
});

上記のように “`{ background: true }“` を設定するだけです。
これも簡単ですね。

// jQuery
$('#container').imagesLoaded( { background: '.item' }, function() {
 console.log('all .item background images loaded');
});

// vanilla JS
imagesLoaded( '#container', { background: '.item' }, function() {
 console.log('all .item background images loaded');
});

あとはセレクタでも指定できます。

jQueryで.load()がありますが、動きが安定しないので、使わないです。imagesLoadedを使うほうがいいと思います。

画像を扱うJavaScriptはたくさんあります。
いや、画像を扱わないことのほうが少ないかもしれませんね。
グリッドレイアウトでの高さを揃える等の処理には最適かもしれません。

Browser support

サポートブラウザは下記になります。

• IE8+
• Android 2.3+
• iOS Safari 4+
• All other modern browsers

これがサポートされていれば、ほぼ大体問題ないと思います。

それでは、楽しい、JavaScriptライフを！