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

Question

我注意到 jQuery 的$.resize()事件在页面加载时触发，而没有任何实际的窗口“调整大小”，具体取决于浏览器。

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

这种行为正常吗？ 有没有办法在为所有浏览器加载网站时统一这种行为？

我已经调用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 加载页面时触发。 它不会在任何刷新时被触发。

Answer 1

我知道这是一篇有点老的帖子，但我最近遇到了类似的问题，在寻找解决方案时，我偶然发现了这篇文章。 在我能够在别处找到任何答案之前，我意识到工作解决方案应该是什么（至少对我而言）。 虽然，现在重新阅读这篇文章，我认为有些人可能发表了与我提出的类似的评论，但他们使用的是 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>

Answer 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);
});

PS 150ms 延迟对我来说效果很好，但您可能需要自己测试。

Answer 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() 检查当前窗口宽度，将其与存储的值进行比较，然后仅当宽度值不同时才触发回调。