jQueryを使用した垂直整列要素（ユニバーサルソリューション）

Question

要素の垂直方向の整列のためにクロスブラウザソリューションを使用しようとしています（それは何度も文書化されているため、要素に画像が含まれているChromeを使用する場合を除いて、効果的です。これは、画像がまだ読み込まれていないため、Chromeが画像の高さを0と判断するためです。これを修正するために、以下のjQueryをどのように変更すればよいですか？

ありがとうございます！

$(document).ready(function() { 
    $(".valign").vAlign(); 
}); 


(function ($) { 
    $.fn.vAlign = function() { 
    return this.each(function(i){ 

     var ah = $(this).height(); 
     var ph = $(this).parent().height(); 
     var mh = Math.ceil((ph - ah)/2); 
     if (mh < 0) { 
      mh=0; 
     } 
     $(this).css('margin-top', mh); 
    }); 
    }; 
})(jQuery); 

Answer 1

$(document).ready()を$(window).load()に置き換えてください。参照されたすべてのイメージが読み込まれるまで実行されません。

Answer 2

ターゲット画像を最初に読み込み、コールバックを使用して高さcalcをトリックする必要があります。したがって：

...return this.each(function(i){ 
    $('targetImagePlaceholder').load('image/url.jpg', function(){ 
     var ah = $this.height(): 
     ... 

yaのために働くべきです。