0

ページには流動的なレイアウトがあり、ページの右上にフロート表示されるログイン ステータス 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;
}
4

1 に答える 1

1

JavascriptとjQueryを使用して、いつでも回避できます。

ドキュメントの準備ができるか、読み込まれるまで、読み込み中の画像を表示し続けます。画像を非表示にして、他の div を表示します。

コードは次のようになります。

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

function onLoadStatistics() {
    $(window).load(function () {
        $('#loading-image').hide();
        $('#content').show();
    });
}
于 2012-07-17T09:05:04.237 に答える