在IE浏览器下，一次resize事件被执行了多次。这是IE6和IE7的一个比较广为认知的问题，这个问题在这两个版本的浏览器中表现有所不同，通常IE6下会比IE7下更为糟糕。
现在已经有了一个较好的解决方案，让jquery.wresize.js这个jquery插件来帮你：
/*
===============================================================================
WResize is the jQuery plugin for fixing the IE window resize bug
...............................................................................
Copyright 2007 / Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: http://www.opensource.org/licenses/mit-license.php
WEBSITE: http://noteslog.com/
===============================================================================
*/
( function( $ )
{
$.fn.wresize = function( f )
{
version = '1.1';
wresize = {fired: false, width: 0};
function resizeOnce()
{
if ( $.browser.msie )
{
if ( ! wresize.fired )
{
wresize.fired = true;
}
else
{
var version = parseInt( $.browser.version, 10 );
wresize.fired = false;
if ( version < 7 )
{
return false;
}
else if ( version == 7 )
{
//a vertical resize is fired once, an horizontal resize twice
var width = $( window ).width();
if ( width != wresize.width )
{
wresize.width = width;
return false;
}
}
}
}
return true;
}
function handleWResize( e )
{
if ( resizeOnce() )
{
return f.apply(this, [e]);
}
}
this.each( function()
{
if ( this == window )
{
$( this ).resize( handleWResize );
}
else
{
$( this ).resize( f );
}
} );
return this;
};
} ) ( jQuery );
如何使用，请看这个例子test page：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;">
<head>
<title> test window resize </title>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.wresize.js"></script>
<script type="text/javascript">
jQuery( function( $ )
{
function content_resize()
{
var w = $( window );
var H = w.height();
var W = w.width();
$( '#content' ).css( {width: W-20, height: H-20} );
}
$( window ).wresize( content_resize );
content_resize();
} );
</script>
</head>
<body>
<div id="content" style="border: 1px dashed silver; position:absolute; overflow:auto;">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</body>
</html>
原文地址：How to fix the resize event in IE
分享到：
相关推荐
为了解决IE浏览器中resize事件执行多次的问题，一种常见的解决方案是使用延时器（debounce）技术。这通常是通过设置一个定时器，在resize事件触发时清除已存在的定时器，并重新设置一个新的定时器。当定时器内的函数...
在IE浏览器下，一次resize事件被执行了多次。这是IE6和IE7的一个比较广为认知的问题，这个问题在这两个版本的浏览器中表现有所不同，通常IE6下会比IE7下更为糟糕。 现在已经有了一个较好的解决方案，让jquery....
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题；分步介绍，先给大家介绍IE7浏览器窗口大小改变事件执行多次bug，具体问题分析及解决方案请看下文。 var ...
事件 专用事件绑定器 v0.1 Alucelx * http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html * <description> * 用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 ...
这个绑定器的目标是解决在IE8及以下和Chrome中`window.resize`事件多次触发的问题。下面是对`onWindowResize`事件绑定器的详细解析： 1. **事件队列（Event Queue）**：`queue`数组用于存储所有注册的事件处理函数...
总结起来，解决JavaScript页面onresize事件在缩放时多次调用的问题，可以采取以下策略： 1. 使用延迟执行：通过setTimeout和clearTimeout控制事件处理函数的执行，避免短时间内连续调用。 2. 对于IE6和IE7，创建一...
可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中，也可以全放到[removed]中，但是这样并不是很方便，有时我们需要两个同时用到。这时就要用window....
同事在项目中使用scroll事件去加载数据，结果IE下悲剧了。给了一个简单优化方法，效果明显。... 基本的优化思路：在一定的时间之内，只执行一次resize事件函数。 代码如下: var resizeTimer = null; $[removed]
无抖动函数确保在一段时间内只执行一次，即使触发多次事件。这可以避免频繁计算和更新，提高页面性能。例如，我们可以通过以下方式实现一个简单的无抖动函数： ```javascript function debounce(func, wait) { ...
4. **CSS响应式设计**：为了实现跨浏览器兼容，特别是IE6+，可能需要使用一些CSS Hack或者条件注释，以解决不同浏览器之间的样式差异问题。 5. **图片加载处理**：由于图片加载可能存在延迟，所以瀑布流布局需要在...
[removed] 在IE浏览器下有多次被执行甚至死循环的bug，会导致浏览器卡死 解决方案： 代码如下:// IE浏览器下将onresize事件放在div上if(navigator.userAgent && navigator.userAgent.toLowerCase().indexOf(“msie”...
这种方式允许我们直接为DOM元素添加事件处理函数，但存在一个问题：如果同一事件被多次绑定，则后面绑定的处理函数会覆盖前面的处理函数： ```javascript var btn = document.getElementById('myButton'); btn....
为了解决 `onresize` 事件多次触发的问题，开发者通常采用一种称为“防抖(debounce)”的技术。防抖函数的目的是确保在一定时间内，无论触发事件多少次，都只执行一次绑定的处理函数。这样可以有效地避免频繁执行耗时...
6. **性能优化**：由于`resize`事件频繁触发，为避免过度渲染，可以设置节流或防抖策略。节流限制在一定时间内只执行一次函数，防抖则是等待一段时间无进一步动作后才执行函数。这样可以提高用户体验，避免因频繁...
通过`addEventListener`或`attachEvent`（IE浏览器）添加事件监听器，可以响应用户行为并执行相应的特效。 4. **CSS3过渡和动画** 虽然CSS3已经提供了内置的过渡和动画功能，但JavaScript可以与CSS结合，更灵活地...