2

マークアップで何百もの大きな写真を含むカスタムスライドショーページがあります。さらに、CSSだけでは実行できないレイアウトの調整があり、javascriptが必要です。その調整は、いくつかのページ要素の計算されたCSSスタイルに依存します。

ここに問題があります：計算されたCSSスタイルをオンにする(document).readyことはうまくいかないようです。DOMが登録されているだけの場合、レイアウト/ペイントはまだ行われていないため、これは完全に理にかなっています。

(window).loadここでの明白な答えです。(window).loadただし、この場合、100以上の大きな画像がすべてダウンロードされるまで、文字通り30秒（低速接続ではさらに長くなります）かかるため、待機時間は非常に長くなります。スライドショーは、最初の2つの画像が読み込まれると、すべての画像が読み込まれるずっと前に使用できるようになるため、原則としてこれで問題ありません。問題は、その時点でもスクリプト化されたCSSレイアウト修正を実行したいということです。

ロードされているimgを確認するために、imageLoadedを使用しています。これは素晴らしい機能であり、imgsで使用した場合のjqueryのloadイベントの問題を回避します。しかし、divなどのページ要素で「ロード」のようなイベント（および計算されたスタイルの可用性）を確認するにはどうすればよいですか？（divはロードイベントを発生させないことに気付きました。）原則として、信頼できるクロスブラウザーDOMイベントが間に(document).readyあり(window).load、特定の要素セットをリッスンして計算されたスタイルを取得できますか？それとも、これら2つの時間的極値のどちらかを選択する必要がありますか？

4

3 に答える 3

3

CSS ロード時

ソース: https://stackoverflow.com/a/12570580/1292652

次のように、確認したい CSS ファイルに固有の参照スタイルを追加します。

#ensure-cssload-0 {
  display: none;
}

次に、JS 関数を使用してcssLoad()、CSS がダウンロードされているかどうかを繰り返し確認します (これが、CSS が実際に描画/レンダリングされたときと大きく異なるかどうかはわかりません)。

var onCssLoad = function (options, callback) {
    var body = $("body");
    var div = document.createElement(constants.TAG_DIV);
    for (var key in options) {
        if (options.hasOwnProperty(key)) {
            if (key.toLowerCase() === "css") {
                continue;
            }
            div[key] = options[key];
        }
    }

    var css = options.css;
    if (css) {
        body.appendChild(div);
        var handle = -1;
        handle = window.setInterval(function () {
            var match = true;
            for (var key in css) {
                if (css.hasOwnProperty(key)) {
                    match = match && utils.getStyle(div, key) === css[key];
                }
            }

            if (match === true) {
                window.clearTimeout(handle);
                body.removeChild(div);
                callback();
            }
        }, 100);
    }
}

次のように使用できます。

onCssLoad({
    "id": <insert element CSS applies to>,
     css: <insert sample CSS styles>
}, function () {
    console.log("CSS loaded, you can show the slideshow now :)");
});


CSSの計算について

ソース: http://atomicrobotdesign.com/blog/javascript/get-the-style-property-of-an-element-using-javascript/

前のソリューションでは、CSS ファイルが'downloaded'されたかどうかのみを通知しましたが、質問では、要素のスタイルが'computed'または'rendered'または' paint' された時期を知る必要があると述べています。これで解決することを願っています。

次のように、確認したい CSS ファイルに固有の参照スタイルを追加します。

#ensure-cssload-0 {
  ignored-property: 'computed';
}

getPropertyValue次に、とを使用getComputedStyleして CSS を確認します。

function getStyle(elem, prop) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
}

今、whileコールバックでループを使用するだけです:

function checkStyle(elem, prop, callback) {
    while ( getStyle(elem, prop) !== 'computed' ) {
        // see explanation below
    }
    callback()
}

JavaScript には( Python のように)ステートメントがないpassため、空のコード ブロックを使用します。

要素に適用されたすべての CSS スタイルを取得したい場合(警告:継承されたスタイルも表示されます)、この SO answerを確認してください。


while() ループの回避

while ループを使用して何かをチェックすることは、通常は推奨されません。ブラウザがハングするJavaScript スレッドに他のことをさせることはありません (最近のすべてのブラウザはマルチスレッドです。このコミックを参照してください)。

これがChuckの提案です。この解決策ははるかに優れています。

function checkStyle(elem, prop, callback) {
    if ( getStyle(elem, prop) !== 'computed' ) {
        // see explanation below
        window.setTimeout( function() {checkStyle(elem, prop, callback);}, 100 )
    } else {
        callback()
    }
}

これははるかに優れています。関数は 100 ミリ秒ごとに非同期でチェックします (必要に応じてこの値を変更できます)。タイムアウトの設定中の関数のラッピングは、setTimeout()まだ引数の受け渡しを許可していないため必要でした。

これが役に立ったことを願っています。その他のリンクについては、この投稿のソース コードを参照してください...

于 2012-09-26T18:26:02.630 に答える
1

DOMContentLoaded イベントを使用できます。dom ツリーの準備が整い、スタイルが適用されたときに発生します。すべての画像とスクリプトが読み込まれると、window.load が起動します。

jQueryを使用している場合は、これを使用できます：

$(function(){
 // this fn not waiting for images
  $('.selector-class')[0].style ;// this is your computed style OR...
  $('.selector-class').css(); // json representation of style;
});

ページに jQuery がない場合...最新のブラウザーでは、次のコードを使用できます。

document.addEventListener( "DOMContentLoaded", function(){
  var computedStyle = document.querySelector('#yourElementId').style ; 
})

YatharthROCK以下に非常に正確なソリューションを追加しました。

于 2012-09-26T18:33:05.663 に答える
0

私のもう一つの答え CSSファイルがいつダウンロードされたかだけを教えてくれましたが、あなたの質問では、要素のスタイルがいつ計算、レンダリング、またはペイントされたかを知る必要があると述べています-更新されました。

これで問題が解決することを願っています（別の角度から攻撃されていると感じたため、これを他の回答とマージしたくありませんでした...） 私は気が変わった、編集を参照してください。

ソース: http://atomicrobotdesign.com/blog/javascript/get-the-style-property-of-an-element-using-javascript/

次のように、確認したい CSS ファイルに固有の参照スタイルを追加します。

#ensure-cssload-0 {
  ignored-property: 'computed';
}

getPropertyValue次に、とを使用getComputedStyleして CSS を確認します。

function getStyle(elem, prop) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
}

今、whileコールバックでループを使用するだけです:

function checkStyle(elem, prop, callback) {
    while ( getStyle(elem, prop) !== 'computed' ) {
        // see explanation below
    }
    callback()
}

JavaScript には( Python のように)ステートメントがないpassため、空のコード ブロックを使用します。

要素に適用されたすべての CSS スタイルを取得したい場合(警告:継承されたスタイルも表示されます)、この SO の回答を確認してください。

于 2012-09-26T19:02:06.993 に答える