ImagesLoaded
アニメーションを多様するようなWebページを作っていると「画像が読み込まれるのが遅くてうまくいかない！」、「画像がちゃんと読み込まれてから関数を実行させたい！」といった場面にぶち当たることが出て来きます。
そんなときに便利なのが「ImagesLoaded」！非常に簡単な記述で、要望を満たしてくれます。
必要なもの
公式ページがあるのでそちらから必要ファイルをダウンロードしてきます。
１つしかありません！
<script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
使い方
使い方も至極単純です。通常のJSで使う場合のほかに、jQueryなどの書き方もあります。
//通常の書き方
imagesLoaded( '#container', function() {/*実行させたい処理*/});
//jQueryの書き方
$('#container').imagesLoaded(function(){/*実行させたい処理*/});
イベントで使う事も出来たりしますが、よく使うのはこのどちらかじゃないでしょうか。
ちなみにjQueryには.load()がありますがこちらは挙動が心もとないので確実を期するならImagesLoadedを使った方が良いのかなーと思います。
ちなみに、僕は以前記事に書いたグリッドレイアウトを実現するMansonryを使う時にこれを併用しました。Mansonryで並べ替えるときに画像が読み込まれていないとうまく整列してくれないからです。画像の幅と高さが取得出来ないせいでしょう。
