在Firefox/Safari中返回错误的jQuery偏移量

我试图通过传递偏移量将元素与另一个元素垂直对齐。它在Chrome排队，但FF/Safari浏览器被进一步向下推比它应该是...例如：http://campaignreport2012.rogerhutchings.co.uk/cinema-verite/在Firefox/Safari中返回错误的jQuery偏移量

function headalign() { 
    var original_offset = ($("#header").offset()); 
    var custom_offset_top = ($(".wp-post-image").offset().top); 
    var custom_offset_left = ($("#header").offset().left); 

    if ($(window).width() > 768) { 
     $("#maintitle").offset({ 
      top: custom_offset_top, 
      left: custom_offset_left, 
     }); 
    } else { 
     $("#maintitle").offset(original_offset); 
    } 

} 

if ($("body").hasClass("single")) { 
    headalign(); 
    $(window).resize(function() { headalign(); }); 
}

它重新计算其罚款调整大小，但它太远第一负载。谁能帮我吗？

来源

2012-09-03 Roger Hutchings

做一个初始'$（window）.load（function（）{headalign（）;}）;'？ – AvL

......实际上已经完成了这项工作。我将不得不研究'$（document）.ready'和'$（window）.load'之间的区别 - 为什么需要将它附加到该事件上，而不是在准备就绪时调用正确？：/如果我有一件事情可以改善它，那就是防止跳到列上去...... –

作为正确答案（而不是评论）：浏览器接收之后

您的JavaScript立即执行。根据此脚本文档中的位置，甚至在DOM完全加载之前就会发生这种情况。

$(document).ready(function(){ headalign(); });将在DOM负载上执行您的函数。但在这一点上，图像和'BlockGothic'字体都不会被渲染。因此custom_offset_top是0或其他一些值（没有图像，没有自定义字体）。

您需要等到页面完全呈现：

$(window).load(function(){ headalign(); });

这导致初始闪烁或跳跃你的"#maintitle"下来。你那种可以 “修复”，在第一个地方躲藏"#maintitle"并在页面后，逐渐把它呈现：

CSS：

#maintitle { 
    display: none; 
}

的javascript：

$(window).load(function(){ 
    headalign(); 
    $("#maintitle").fadeIn(200); 
});

希望这有助于！

来源

2012-09-04 10:11:31 AvL

在Firefox/Safari中返回错误的jQuery偏移量

回答

相关问题