ページの使用画像読み込み後にJavaScript処理を実行する記述



最近、Flashを使わずにiPhoneやiPadでも見れる様なアニメーションを入れて欲しいというリクエストがよくあります。
アニメーション演出する画像が結構容量が結構あるので、
場合によっては画像を全て読込む前にJsのアニメーション処理が実行されてしまって、
表示する画像がキャッシュされていない初期表示時のブラウザは途中からアニメーションが実行されたりしてイマイチな感じになります。
そのため、アニメーション処理前に画像を全て読込んでから実行したく、以下のjsをたまに使用してます。

 
呼び出し元の記述例

$(function() {
	$("#読込みたい画像があるタグid img").imagesLoaded( function(){
			画像読込み後のアニメーション処理
	});
});

 
呼び出しjs

$.fn.imagesLoaded = function(callback){
  var elems = this.filter('img'),
      len   = elems.length,
      blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
      
  elems.bind('load.imgloaded',function(){
      if (--len <= 0 && this.src !== blank){ 
        elems.unbind('load.imgloaded');
        callback.call(elems,this); 
      }
  }).each(function(){
     // cached images don't fire load sometimes, so we reset src.
     if (this.complete || this.complete === undefined){
        var src = this.src;
        // data uri bypasses webkit log warning (thx doug jones)
        this.src = blank;
        this.src = src;
     }  
  }); 

  return this;
};

 
参照元URL:imagesLoaded() jquery plugin

 
「とりあえずjqueryでお願いします!」っていういつものアレです…