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