避免在 Chrome 中的页面加载时触发调整大小事件答案

【问题标题】：Avoid resize event to be fired on page load in Chrome避免在 Chrome 中的页面加载时触发调整大小事件
【发布时间】：2013-11-07 06:46:09
【问题描述】：

我注意到 jQuery 的 $.resize() 事件在页面加载时被触发，而没有根据浏览器对窗口进行任何实际的“调整大小”。

它不仅会触发一次，有时甚至会触发两次。（在 Chrome 中加载 30.0.1599.101 m，在 Opera 中调整大小...）

这种行为正常吗？没有任何方法可以统一所有浏览器在加载网站时的这种行为吗？

当调整大小已经完成 (using an interval) 时，我已经只调用了一次 resize，但这并不能解决 Chrome 加载时触发事件的问题。

我无法创建重现此问题的小提琴，但您可以使用如下文件测试此行为：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(window).resize(function() {
        alert("Fired!");
    });
</script>
</head>
<body>

</body>
</html>

第一次使用 Chrome 加载页面时将触发该事件。 它不会在任何刷新时触发。

【问题讨论】：

当文档加载（即准备好）时，如何挂钩事件处理程序？ $(document).ready(function() { $(window).resize(function() { alert("Fired!"); }); });我不确定这是否是您正在寻找的答案，因为您在文本中提出了两个与本文标题有些脱节的单独问题。
@EiríkurFannarTorfason 这不会阻止事件在加载时触发。
看来你是对的。当我第一次测试它时，这似乎对我有用，但现在我有时会在窗口加载后不久触发调整大小事件处理程序。
您的测试 HTML 并未确认 Chrome 36 的该问题。但我也可以看到（至少在 x 尺寸 iframe 内）。

标签： javascript jquery jquery-1.8

【解决方案1】：

我知道这是一篇有点旧的帖子，但我最近遇到了类似的问题，在寻找解决方案时我偶然发现了这篇文章。在我能够在其他地方找到任何答案之前，我意识到工作解决方案应该是什么（至少对我而言）。虽然，现在重新阅读这篇文章，我认为有些人可能使 cmets 类似于我的建议，但他们使用的是 jQuery 就绪事件而不是窗口加载事件。我想发布我的解决方案作为答案，以防它帮助其他人。

在大多数情况下，在页面完成加载之前，您不需要连接 resize 事件。所以，这就是我的解决方案所基于的。如果您需要在加载完成之前出于任何原因设置调整大小事件，那么这可能不适合您。

我在一个实际项目中使用下面的方法，并且我没有遇到过多次触发调整大小的问题（当它不应该触发时）。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    $(window).on('load', function () {
       // Only wire up the resize handler after loading is complete to prevent fire of resize before page is loaded.
       $(window).on('resize', function() {
            alert("Fired!");
        });
    });
</script>
</head>
<body>

</body>
</html>

【讨论】：

【解决方案2】：

我也经常在 chrome 上遇到这个问题。对我来说，解决方案很简单，在添加事件处理程序之前设置一个小超时。

setTimeout(function(){
    $(window).on('resize', function(){
        alert("Fired!");
    });
}, 150);

根据 thomas-j-moffett 的建议，我会将它放在窗口加载事件中。这样您就不会依赖网络速度（与文档就绪事件相反）

$(window).on('load', function(){
    setTimeout(function(){
        $(window).on('resize', function(){
            alert("Fired!");
        });
    }, 150);
});

附： 150ms 延迟对我来说效果很好，但你可能需要自己测试一下。

【讨论】：

【解决方案3】：

这里有一个快速的解决方案：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
    var windowResize={
        width:0,
        init:function() {
            this.width=$(window).width();
        },
        checkResize:function(callback) {
            if( this.width!=$(window).width() ) {
                callback.apply();
            }
        }
    };
    windowResize.init();
    $(window).resize(function() {windowResize.checkResize(function() {
            console.log("Fired!");
        });
    });
</script>
</head>
<body>

</body>
</html>

首先，创建一个类似于上面显示的 windowResize 对象的对象。 windowResize.init() 测量窗口的宽度并将值存储在 windowResize.width 中。然后，使用 $(window).resize() 上的所需回调函数调用 windowResize.checkResize()。 windowResize.checkResize() 检查当前窗口宽度，将其与存储的值进行比较，然后仅在宽度值不同时触发回调。

【讨论】：

此解决方案不解决在实际窗口调整大小时触发多个调整大小事件的问题（chrome 将触发 4 或 2 个事件）。所以你应该继续使用你的间隔方法来处理多个事件。
这不是一个强大的解决方案，更像是一种黑客行为，并且需要更多的资源，而不是很好
@KevinSimple 看问题的日期。在大多数现代浏览器中似乎已经解决了这个问题，因为我最近没有遇到过这样的问题。但当时，这是一个真正的问题，解决它的唯一方法是使用一个 hacky 解决方案。无论如何，我想知道是否有办法标记像这样的过时问题。
这是代码问题，不是浏览器问题，更好的方法是在调用 checkResize 之前添加一个计时器延迟，以便浏览器有足够的时间来渲染 dom，
@KevinSimple 我明白了。我没有延迟代码的执行，因为我认为不可能精确地预测何时在不同的设备/浏览器上完成重新渲染。但是，下次我将在 $(document).ready() 或 $(window).load() 上调用 windowResize.init() 来试用您的方法。如果我发现任何有趣的东西，我会发表评论。谢谢！