右浮動的div浮動在頁面的中間，直到頁面渲染完成

該頁面有一個流體佈局和日誌狀態的div浮動到頁面的右上角。右浮動的div浮動在頁面的中間，直到頁面渲染完成

的問題是，該元素只是坐在在頁面的中間部分，直至頁面完全呈現，此時它移動到正確的位置。

想這是因爲瀏覽器不知道包含div將有多大，直到它的渲染。

是否有處理這一問題的技術？

下面是DIV的CSS：

div#headerLinks 
{ 
    float: right; 
    background: url('../Img/SomeImage.jpg') top left; 
    display: inline-block; 
    padding: 10px 14px 10px 15px; 
    margin-right: -20px; 
}

來源

2012-07-16 gb2d

你看到跨瀏覽器的這種行爲？你試圖加載多大的頁面？ – chipcullen 2012-07-16 14:04:17

是的，跨瀏覽器。相當沉重。如果沒有緩存，大約300kb – gb2d 2012-07-16 14:13:50

您可以隨時解決它。用一些javascript和jquerry。繼續顯示加載圖像，直到文檔準備就緒或加載完畢。隱藏圖像並顯示其他div。 – Liquid 2012-07-16 14:14:57

你總是可以解決辦法是，與一些JavaScript和jQuery。

保持表示裝載圖像直到文檔準備好或加載。隱藏圖像並顯示其他div。

代碼看起來是這樣的：

$(function() { 
    onLoadContent(); 
}); 

function onLoadStatistics() { 
    $(window).load(function() { 
     $('#loading-image').hide(); 
     $('#content').show(); 
    }); 
}

來源

2012-07-17 09:05:04 Liquid

@Cognize添加的答案，所以你能接受:) – Liquid 2012-07-18 11:08:22

謝謝，這竟然是最好的選擇，並在網站上運作良好。似乎也提高了整體渲染速度。 – gb2d 2012-07-26 09:06:46

右浮動的div浮動在頁面的中間，直到頁面渲染完成

回答

相關問題