在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偏移量

回答

相關問題