ページ内画像読み込み後にJavaScript処理を実行

ページ内画像読み込み後にJavaScript処理を実行する方法です。

imagesLoaded() jquery plugin

ソース元：imagesLoaded() jquery plugin

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

※予めjQueryファイルを読み込んでおく必要がります。$(“”).imagesLoaded( function()｛　画像読込み後の処理　｝);で画像読込み後、JavaScript処理が実行できます。

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

$.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;
        // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
        // data uri bypasses webkit log warning (thx doug jones)
        this.src = blank;
        this.src = src;
     }  
  }); 

  return this;
};

　
※流用される場合は自己責任でお願いします。