0

私は次のjQueryを持っています：

$(document).ready(function(e) {
    $('#content-wrapper').height($(window).height() - $('#header-wrapper').height() - 25);
});

$(window).resize(function(e) {
    $('#content-wrapper').height($(window).height() - $('#header-wrapper').height() - 25);
});

何かが私にそれを間違っているか、より長いルートを取っていることを教えてくれます。

まったく同じスクリプトをより速く再作成する方法はありますか？

脚注：OCDのマイナーなケースの場合、このスクリプトはaのサイズ<div>を変更して、ページの残りの部分を埋めるようにします。の高さ#header-wrapperはランダムで、25はとの間のパディング#header-wrapperです#content-wrapper。

4

3 に答える 3

2

私が思う問題は、サイズ変更中だけでなく、サイズ変更中に何度もサイズ変更が発生することに関連していると思います。

参照： http： //jsfiddle.net/8kaar/

これを修正するには、setTimeoutを追加し、サイズ変更時にクリアして、サイズ変更を停止した後にのみ実行されるようにします

ここを参照してください：http：//jsfiddle.net/8kaar/1/

したがって、コードは次のように変更する必要があります

$(window).ready(resizeCallback);
$(window).resize(resizeCallback);

var resizeTimeoutId = null;
function resizeCallback() {
    if (resizeTimeoutId)
        window.clearTimeout(resizeTimeoutId);

    resizeTimeoutId = window.setTimeout(resizeAction, 250);
}

function resizeAction() {
    $('#content-wrapper').height($(window).height() - $('#header-wrapper').height() - 25);
}
于 2012-09-19T14:11:19.977 に答える
0

まず第一に、ソリューションは遅くなります。サイズ変更のたびにDOM要素を見つけて、それらをjqueryオブジェクトにラップするため、cacheそれらが必要になります。この質問から私の例を見てください：サイズ変更の例

于 2012-09-19T14:03:32.083 に答える
0

ページの読み込み後に＃header-wrapperのサイズは変更されますか？そうでない場合は、ウィンドウのサイズを変更するたびに高さを再計算する必要はありません。これにより、処理が高速化されます。

于 2012-09-19T13:51:16.867 に答える