7

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

它不仅会发射一次，有时甚至会发射两次。（在 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 加载页面时触发。它不会在任何刷新时触发。

4

3 回答 3

7

我知道这是一篇有点老的帖子，但我最近遇到了类似的问题，在寻找解决方案时，我偶然发现了这篇文章。在我能够在其他地方找到任何答案之前，我意识到工作解决方案应该是什么（至少对我而言）。虽然，现在重新阅读这篇文章，我认为有些人可能会发表与我建议类似的评论，但他们使用的是 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>
于 2016-01-31T20:22:54.390 回答
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 延迟对我来说效果很好，但你可能需要自己测试一下。

于 2019-11-14T09:53:49.550 回答
0

这是一个快速的解决方案：

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

于 2013-10-28T14:43:50.620 回答