右浮动div在页面中间浮动，直到页面渲染完成

Question

该页面具有流畅的布局，并且登录状态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;
}

Answer 1

您可以随时使用一些Javascript和jQuery来解决它。

在文档准备好或加载之前，继续显示加载图像。 隐藏图像并显示其他div。

代码可能如下所示：

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

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