JavaScriptを使ってて、画像サイズなど、画像に関する情報を取得し処理することもあるかと思います。
画像を処理する上で、画像の読み込み処理より、JavaScriptが先に実行してしまうこともあるかと思います。
delayつかったり、onLoad使ったりして、色々対策をしている方もいるかと思います。
そんな方に朗報簡単に処理できるJavaScriptプラグイン「imagesLoaded」をご紹介です。

プラグインの読み込み

gitHubよりダウンロードして読み込む方法とCDNで読み込む方法があります。

gitHub

# gitHubよりデータをダウンロードして読み込む
<script src="Path/to/imagesloaded.pkgd.min.js"></script>

# CDNで読み込む
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>

あとは、npm、Bowerをつかってパッケージをインストールして使う方法もありますね。

Install via npm: npm install imagesloaded

Install via Bower: bower install imagesloaded --save

使用方法

使い方はすごく簡単で、下記のどちらかをつかうだけです。
jQueryでもVanillaJSでもどちらでも使えるようですね。

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

上記で実行処理を囲むだけですね。
特に難しい点はないかと思います。背景に関しては少し違うようです。

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

背景の場合は、{ background: true },をfunction()の前にもってくることで実行可能です。
クラスで指定も可能のようです。

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

trueだった部分をクラスに変えるだでクラス指定ができます。
また、オプションで、「always」「done」「fail」が使えます。

always

// VanillaJS
imgLoad.on( 'always', function( instance ) {
 //実行させたい処理
});

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

done

// VanillaJS
imgLoad.on( 'done', function( instance ) {
 //実行させたい処理
});

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

fail

// VanillaJS
imgLoad.on( 'fail', function( instance ) {
 //実行させたい処理
});

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

処理するタイミングを変えることも出来て便利ですね。
本当はこの使い方が一番便利なのかもしれません。

みなさんも画像をつかうJavaScriptの処理は結構あると思います。
こんな時に、使ってみてはいかがですか？いままで、微調整しながら、処理してたことが一気に解決するかもしれません。
それでは、よきJavaScriptライフを！