jquery - 有没有更有效的方法在页面加载和调整大小时运行它？

Question

我正在使用它在调整窗口大小时动态调整正文上边距，以提高响应速度。

$(window).resize(function() {
    $('body').css('margin-top', $('#header').height());
});

但我正在尝试找到一种更有效的方法来在页面加载时运行同一行，而不仅仅是像这样再次处理该行:

$('body').css('margin-top', $('#header').height());
$(window).resize(function() {
    $('body').css('margin-top', $('#header').height());
});

Answer 1

就性能而言，最佳做法是在超时内的调整大小事件中运行代码。此外，将元素保存在变量中也是个好主意。

最后但同样重要的是，为您的事件使用命名空间以显式触发它们。

var winresizeT,
    $body = $('body'),
    $window = $(window),
    $header = $('#header');

$window.on('resize.bodymargin', function() {
  clearTimeout(winresizeT);
  winresizeT = setTimeout(function() {
    $body.css('margin-top', $header.height() + 'px');
  }, 30);
});

$window.on('load', function() {
  $window.trigger('resize.bodymargin');
});