Alv*_*aro 7 javascript jquery jquery-1.8
我注意到$.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加载页面时,系统会触发此事件.任何刷新它都不会被触发.
小智 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>
小智 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() 检查当前窗口宽度，将其与存储的值进行比较，然后仅当宽度值不同时才触发回调。
| 归档时间： |
|
| 查看次数： |
3887 次 |
| 最近记录： |