比較快的方式來運行該腳本調整大小

我有以下的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情況的人，此腳本將調整<div>以使其填充頁面的其餘部分。 #header-wrapper的高度是隨機的，25是#header-wrapper和#content-wrapper之間的填充。

來源

2012-09-19 Albert

不會讓它變得更快，但首先，我會將這兩個相同的匿名函數重構爲一個命名的函數。 – CaffGeek

如果不應該改變，你可以在全局變量中存儲'$（'＃header-wrapper'）。height（） - 25'。我會認爲這是靜態的，但我不知道頁面！您必須在document.ready – Ian

中這樣做。這是因爲調整窗口大小時調整大小很多次，而不僅僅是在完成調整大小時。我看到我的回答如下 – CaffGeek

我認爲這個問題是關於調整大小射擊很多次，而你正在調整大小，而不是在完成。

參見：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-19 14:11:19 CaffGeek

頁面加載後，頁眉封裝大小是否發生變化？如果沒有，那麼每次調整窗口大小時都不需要重新計算高度，這會加快速度。

來源

2012-09-19 13:51:16 Kostia

我認爲重點是它需要在窗口調整大小上完成，因爲如果窗口調整大小，div「content-包裝「，需要調整大小以適應窗口的新形狀... – Ian

首先您的解決方案比較慢，因爲您在每個調整大小上找到DOM元素並將它們包裝到jquery對象中，您需要它們的cache。看看我的例子，從這個問題：resize example

來源

2012-09-19 14:03:32 webdeveloper

雖然他通過id找到兩個項目，但它的速度應該微乎其微。 – CaffGeek

「CaffGeek它取決於許多因素，例如頁面大小等等。調整窗口大小時會調用多少次函數？ – webdeveloper

比較快的方式來運行該腳本調整大小

回答

相關問題