解决IE中Resize事件重复提交多次的问题（转）

Kenny.Lee

浏览: 514858 次
性别:
来自: 广州

最近访客更多访客>>

fjiis

pipifeiya

zhangyawen1028

ermaogogo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

最近项目中用到resize事件来控制页面的元素高度，相信这个功能并不少见。当问题就出现了，偶尔发现在IE6下，页面会等待比较久甚至出现假死状态。在DEBUG的过程中发现resize事件触发后，被重复执行了多次。在网上搜索了一下解决方案，分享下这个比较不错的解决办法。

PS：若项目是使用到jQuery的话，可以最大限度的降低工作量了。

-----------------------------以下是转载内容

作者：Andrea Ercolino

In IE the window resize event is fired multiple times per actual resize: it is a well known issue for IE6 and IE7, but they misbehave along different patterns. Actually it seems that IE6 is worse than IE7.

After quite a long session of R&D, I've got to a pretty good solution, in the form of a jQuery plugin:

jquery.wresize.js（作者网站的原插件地址在此）。

/*  
===============================================================================
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 );

If you want to try it, here is a test page, where a div is automatically resized when the window is resized.

<!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>

分享到：

【转】如何在win7系统上安装Jdk版本1.6 | 64位Ubuntu 11.04安装PPS的办法

2011-07-19 13:58
浏览 2556
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论