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);
});

有些东西告诉我我做错了，或者走的路更长。

有没有更快的方法来重新创建完全相同的脚本？

脚注：对于那些患有轻度强迫症的人，此脚本会调整 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

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

于 2012-09-19T13:51:16.867 回答
0

首先，您的解决方案较慢，因为您在每次调整大小时都会找到 DOM 元素并将它们包装到 jquery 对象中，您需要cache它们。从这个问题看我的例子：resize example

于 2012-09-19T14:03:32.083 回答