结合 onload 和 onresize (jQuery)答案

【问题标题】：Combine onload and onresize (jQuery)结合 onload 和 onresize (jQuery)
【发布时间】：2010-12-30 19:03:47
【问题描述】：

我想在加载和调整大小时调用该函数。

有没有更好的方法来更紧凑地重写它？

$('.content .right').width($(window).width() - (480));
$(window).resize(function(e) {
    $('.content .right').width($(window).width() - (480));
});

【问题讨论】：

标签： jquery resize window

【解决方案1】：

可以单独绑定resize事件，加载时自动触发该事件：

// Bind to the resize event of the window object
$(window).on("resize", function () {
    // Set .right's width to the window width minus 480 pixels
    $(".content .right").width( $(this).width() - 480 );
// Invoke the resize event immediately
}).resize();

最后一次.resize() 调用将在加载时运行此代码。

【讨论】：

$(window).on('resize', function(){}).trigger('resize');
@kzh .resize 有问题吗？这是该方法的标准用法，如the documentation states：将事件处理程序绑定到“resize”JavaScript 事件，或在元素上触发该事件。
@JonathanSampson 不。没问题。只是显示较新的语法。
@kzh .trigger 和 .resize 都来自 jQuery 1.0。
你先生，值得一吃。

【解决方案2】：

我认为最好的解决方案就是将它也绑定到加载事件：

$(window).on('load resize', function () {
    $('.content .right').width( $(this).width() - 480 );
});

【讨论】：

我同意。这是最干净的方式。

【解决方案3】：

很高兴发现重复的逻辑并将其分解为一个函数：

function sizing() {
  $('.content .right').width($(window).width() - 480);
}

$(document).ready(sizing);
$(window).resize(sizing);

【讨论】：

谢谢，这适用于 DOM 准备就绪和调整窗口大小时。

【解决方案4】：

我将结合其他两个答案的最佳部分。首先，将重复的代码移动到一个函数中。其次，不要污染全局命名空间。

$(document).ready(function() {
  var adjust_size = function() {
    $('.content .right').width($(window).width() - 480);
  };
  adjust_size();
  $(window).resize(adjust_size);
});

我将函数命名为 adjust_size，因为我更喜欢动词来表示面向动作的函数。

【讨论】：

这是我可以让它为我正在使用的脚本工作的唯一方法。

【解决方案5】：

简单的方法：

html:
<body onload="$(window).resize()"> 

javascript:
$(window).resize(function () { 
...
});

【讨论】：