Question

我有以下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之间的填充。

Answer 1

我认为这个问题与你调整大小时多次调整大小有关，而不仅仅是在完成时。

请参阅：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);
}

Answer 2

页面加载后＃header-wrapper大小是否会发生变化？如果没有，那么每次调整窗口大小时都不需要重新计算高度，这会加快速度。

Answer 3

首先，你的解决方案速度较慢，因为你在每个resize上找到DOM元素并将它们包装到jquery对象，你需要cache个。从这个问题看我的例子：resize example

更快地运行此调整大小脚本的方法

3 个答案: