Question

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

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

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

调整大小时我已经调用了resize一次（using an interval），但这并没有解决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 ready事件而不是窗口加载事件。我想发布我的解决方案作为答案，以防它帮助其他人。

在大多数情况下，在页面加载完成之前，您不需要连接resize事件。所以，这就是我的解决方案所依据的。如果您在加载完成之前需要设置任何原因的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);
});

P.S。 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（）检查当前窗口宽度，将其与存储值进行比较，然后仅在宽度值不同时触发回调。

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

3 个答案: