Элементы выравнивания по вертикали (универсальное решение) с помощью 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

Сначала необходимо загрузить целевое изображение и использовать обратный вызов для обмана высоты. Итак:

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

Должно работать на тебя.