使用jQuery垂直对齐元素通用解

如何解决使用jQuery垂直对齐元素通用解

| 我正在尝试为元素的垂直对齐提供一个跨浏览器解决方案（该文档已被记录了很多次，所以我不确定该在哪里归因于此）。除了使用元素包含图像的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);

    

解决方法

        只需将

$(document).ready()

换成

$(window).load()

。直到所有参考图像都加载后，它才会执行。     ,        您需要先加载目标图像，然后使用回调来欺骗高度计算。所以：

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

应该为你工作。