0

css-template-layoutに問題があります。そのプラグインは、コンテンツをスロットにカットするのに役立ちます。コンテンツスロットの高さが最も高く、通常はいくつかの写真があります。写真の読み込みが完了すると、コンテンツdivは大きくなりますが、コンテンツスロットは同じサイズのままです。その時点で、コンテンツはフッターにオーバーレイされます。

したがって、ページは次のように始まります。

My Cool Site             
──────┬──────────────────
home  │ My favorite pics:
about │                  
pics  │ (loading)        
──────┴──────────────────
    Copyright 2012 me.

しかし、最終的には次のようになります。

My Cool Site             
──────┬──────────────────
home  │ My favorite pics:
about │                  
pics  │ ┌┐ ┌─┐ ┌─┐       
──────┴─└┘─│@│─│#│───────
    Copyrig└─┘2└─┘ me.

これが私のCSSの外観です。

body { 
    margin: 0;
    padding: 0;

    display:    ".hh."
                ".nc."
                ".ff."
    * 200px minmax(500px,800px) *
    ;
    width: 100%;
    background: #DDF;   
}

#header { position: h; text-align: center; }

#content { 
    position: c;
    margin: .5em;
}

#navbar { 
    position: n;
    background: #AAD;
    margin: 0;
    padding: .5em;
}

#footer { 
    position: f; 
    text-align: center;
    font-weight: bold;
}

body::slot(n) {
    background: #AAD;
}

#header, #footer {
    background: #CCE;
}

次の方法でcss-templateをロードします。

$.templateLayoutShowOnReady();

$(function() {
    $.setTemplateLayout('/static/style1.css');
});

関数$（window）.load（）でtemplateLayoutを設定/やり直そうとしましたが、機能しませんでした。

何か案は？前もって感謝します。

4

1 に答える 1

0

編集: おっと、あなたの最後の文に気付きました。ここで、すでに知っていることをいくつか説明しました。ただし、この回答は、機能する可能性のある別のアプローチを提供します。とにかく、後でこの質問を見つける他の人のために、あなたがすでに知っていることの再説明を残します.

css-template-layout は jQuery プラグインです。コード スニペットは、jQuery の$()関数を使用setTemplateLayoutして、DOM が読み込まれたときに呼び出します。しかし、css-template-layout は、DOM がロードされた後にロードされた、新しく計算された画像の高さを考慮していません。そのため、その後はテンプレート レイアウトを更新する必要があります。

css-template-layoutがこの方法を提供して$.redoTemplateLayout()いることがわかります。コンテンツ内の画像が読み込まれるたびに発生するイベントで呼び出してみてください。通常は.on()を使用しますが、画像がいつ読み込まれたかを確認するのは明らかに簡単ではないため、jQuery プラグインのimagesloadedを使用できます。ページ上のすべての画像は、読み込まれたときに独自のイベントを発生させる必要があります。レイアウトを修正するためにすべての画像が読み込まれるのを待つ必要はありません。画像が完全に読み込まれていない場合でも、レイアウトに影響を与えるのに十分な画像が読み込まれた時点を見つけるためのイベントがあるかどうかはわかりません。そのようなイベントがあれば、それを使用してください。

于 2012-06-07T15:58:11.827 に答える