JS複数の画像をload後に処理したい

desandro/imagesloaded · GitHubって便利なプラグインもあるけれど、そこまでしなくても良いやくらいな時に。。。

例えばこんなHTMLで画像が全て読み込まれたら何か処理を実行したい
(width取りたいとか。)

<div id="images">
  <img src="/img/hoge.jpg" />
  <img src="/img/fuga.jpg" />
  <img src="/img/mofu.jpg" />
</div>

画像のロード完了数を数えてcallbackを実行するようにする。

// javascript
!function() {
  // ロード完了数を数えて関数を実行するクロージャー
  var ImgLoader = function(num, callback, options) {
    var count = 0;
    return function() {
      if(++count >= num) {
        callback(options);
      }
    };
  }
  // 略
  $(function(){
    var $wapper = $('#images');
    var $images = $wapper.find('img');
    var loader = ImgLoader($images.length, function(options){
      console.log('loaded', options);
      console.log('new width', $wapper.width());
    }, {width: $wapper.width()});

    $images.each(function(i, img) {
      // 画像ロード完了時にloaderを実行
      img.onload = loader;
    });
  });
}();

こんな感じでImgLoaderに与えておいたnumになれば処理が実行されます。

ただIE系だとキャッシュとかで画像がロードされてしまっていると
onloadイベントが発生しなかったと思うので、
このままだと上手くいかない事があるかと思います。。。
IEは滅びよ♡

imgタグにwidth, heightが指定されているとload待たなくてもwidth, height取れるのですが、スマートフォンとかの対応で100%指定などしてるとロード待たないと値が0とかになる事も結構あると思います。
で、スマートフォン オンリーならIEは無視できるので、
こんな処理で十分なんじゃないかなぁ。なんて思ったりしました。