jQuery 调整大小功能在页面加载时不起作用答案

【问题标题】：jQuery resize function doesn't work on page loadjQuery 调整大小功能在页面加载时不起作用
【发布时间】：2011-02-05 12:44:43
【问题描述】：

如何让这个函数不仅在窗口调整大小时运行，而且在初始页面加载时运行？

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

【问题讨论】：

标签： jquery onload-event

【解决方案1】：

你会想要使用：

$(document).ready(function() { /* your code */ });

在加载时使某些事情发生。如果你想让某些东西在 onload 和 onresize 上工作，你应该这样做：

onResize = function() { /* your code */ }

$(document).ready(onResize);

$(window).bind('resize', onResize);

【讨论】：

【解决方案2】：

我认为最好的解决方案就是将其绑定到加载和调整大小事件：

$(window).on('load resize', function () {
    // your code
});

【讨论】：

这是最直接的答案
这让它变得简单干净。

【解决方案3】：

此行为是设计使然。

你应该把你的代码放到一个命名函数中，然后调用这个函数。

例如：

function onResize() { ... }

$(onResize);
$(window).resize(onresize);

或者，您可以制作一个插件来自动绑定和执行处理程序：

$.fn.bindAndExec = function(eventNames, handler) {
    this.bind(eventNames, handler).each(handler);
};

$(window).bindAndExec('resize', function() { ... });

请注意，如果处理程序使用event 对象，它将无法正常工作，并且它不会涵盖bind 方法的所有重载。

【讨论】：

【解决方案4】：

$(document).ready(onResize);
$(window).bind('resize', onResize);

没有和我一起工作。

试试

$(window).load('resize', onResize);
$(window).bind('resize', onResize);

改为。

（我知道这个问题很老了，但是谷歌把我发到这里了，所以......）

【讨论】：

【解决方案5】：

另一种方法，您可以简单地设置一个处理程序，然后自己欺骗一个调整大小事件：

// Bind resize event handler through some form or fashion
$(window).resize(function(){
  alert('Resized!');
});

// Trigger/spoof a 'resize' event manually
$(window).trigger('resize');

【讨论】：