0

总的来说，我是编程新手，而且由于我是完全自学的，所以我缺乏一些编程的基础知识。这是我编写的一些简单的 jQuery，以确保网站的包装延伸到页脚的开头，即使没有足够的内容：

$(window).resize(function() {
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
});

我定义了页脚的高度。然后我得到视口的高度。然后我从视口减去页脚的高度。然后我将该高度应用于#main元素。我知道我可以使用 jQuery 来获取页脚的高度，但是我遇到了问题并且由于某种原因它不能正常工作。

我之前重复了代码，但在$('window').resize()函数之外，因此它在页面加载时运行一次。

我觉得我可以把它变成一个函数，因为它重复了两次。另外，我在这里询问的主要原因是，如果我在几秒钟内快速调整浏览器的大小，我的浏览器会因为这段代码而占用 CPU。

抱歉，如果这不是要问的正确网站。

4

4 回答 4

1

您可以resize在绑定事件处理程序后以编程方式触发窗口上的事件：

$(window).resize(function() {
    // your code here
}).resize();

这样可以节省您在触发// your code here实际事件之前复制函数外部的部分以执行此操作。resize

您提到的 CPU 问题可能与函数内部的实际代码关系不大（这相对微不足道），而与resize触发的事件数量有关。取自jQuery 文档.resize()：

调整大小处理程序中的代码不应依赖于调用处理程序的次数。根据实现，调整大小事件可以在调整大小进行时连续发送（Internet Explorer 和基于 WebKit 的浏览器，如 Safari 和 Chrome 中的典型行为），或者仅在调整大小操作结束时发送一次（典型行为在其他一些浏览器，例如 Opera）。

于 2013-03-11T15:04:43.570 回答
1

在调整大小时防止它吃掉你的 cpu 的一种方法是让它只在调整大小结束时发生，比如：

function afterResize()
{
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
}

var timeout = null;
$(window).resize(function() 
{
    clearTimeout(timeout);
    timeout = setTimeout(function(){ afterResize(); }, 100);    
});

这是一个 jsfiddle http://jsfiddle.net/RxRcQ/1/

于 2013-03-11T15:06:18.640 回答
1

您所做的很好，因为您需要在 window.resize() 事件中明确调用它，因为这会导致视口发生变化。

正如许多人所建议的那样，手动触发调整大小事件是有益的。

为了增强算法，您可能可以使用更少的变量。如下所示。

    var postResize;
    $(window).resize(function() {
            clearTimeout(postResize);
            postResize = setTimeout(function() {
                    var footerHeight = 147;
                    $("#main").height($(window).height() - footerHeight);
            }, 100);
    }).resize();

上述算法增加了性能增强：在用户停止调整窗口大小 100 毫秒之前，它不会进行视口计算。当您将窗口大小调整 400-500 像素（例如）时，这使得函数仅调用一次（而不是 400-500 次调用）。

希望这可以帮助 ：）

于 2013-03-11T15:18:55.267 回答
0

只需自己触发调整大小事件。

$(window).resize(function() {
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
}).resize();

尽管根据您的内容，您可能需要等到窗口加载后才能执行此操作。

$(window).resize(function() {
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
}).on("load",function(){
    $(window).resize();
});
于 2013-03-11T15:05:16.970 回答