解决resize多次执行的问题
2011-07-14 13:49
447 查看
resize事件是在窗口或框架的大小被调整时发生,包括最小化、最大化。在IE和Opera浏览器中,只要窗口边框被拖动,就触发该事件,在Mozilla浏览器中,resize 事件只是在停止改变窗口大小时才会触发。
这是个让人每次改变页面窗口的大小时很郁闷的方法,尤其在IE浏览器中,稍微动下窗口边框,就会触发很多次事件。更让人蛋疼的是在resize事件中包含某些页面内容处理或计算导致resize事件再次被触发的时候,IE会随机陷入假死状态。
其实这个问题有两种方法解决:
1.
这个方法虽然可以解决多次执行事件问题,但是不完美。2.推荐用jquery插件
你可以把上面的代码另存为jquery.wresize.js导入网页,把以下代码拷贝到记事本中,另存为网页,然后测试一下。示例:
记下笔记
这是个让人每次改变页面窗口的大小时很郁闷的方法,尤其在IE浏览器中,稍微动下窗口边框,就会触发很多次事件。更让人蛋疼的是在resize事件中包含某些页面内容处理或计算导致resize事件再次被触发的时候,IE会随机陷入假死状态。
其实这个问题有两种方法解决:
1.
var resizeTimer = null ; |
$(window).resize( function () { |
if (resizeTimer) clearTimeout(resizeTimer); |
resizeTimer =setTimeout( "changeHeight()" , 500); |
}); //resize事件延迟500毫秒执行 |
/*
===============================================================================
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 );
你可以把上面的代码另存为jquery.wresize.js导入网页,把以下代码拷贝到记事本中,另存为网页,然后测试一下。示例:
<!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 testtest test test test test test test test t
est test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 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>
记下笔记
相关文章推荐
- 解决事件多次绑定,执行多次问题
- 解决html按钮切换绑定不同函数后点击时执行多次函数问题
- 解决Spring定时计划任务重复执行两次或多次(实例被构造两次)问题的方法
- 完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
- 如何处理 jQuery $(window).resize() 中的方法被多次执行的小问题
- jquery click嵌套 事件重复注册 多次执行的问题解决
- JQuery 解决 鼠标快速滑过后,会执行多次滑出的问题
- 解决在IE浏览器中resize事件执行多次
- 解决Button多次点击重复执行方法的问题
- 在IE浏览器中resize事件执行多次的解决方法
- IE6浏览器下resize事件被执行了多次解决方法
- android解决使用CountDownTimer出现的时间不稳定问题(执行多次变化加快)
- 解决在IE浏览器中JQuery.resize()执行多次的方法
- 支付宝多次执行回调问题的解决
- 解决Javascript中$(window).resize()多次执行
- 解决html按钮切换绑定不同函数后点击时执行多次函数问题
- jquery click嵌套 事件重复注册 多次执行的问题解决
- IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
- 解决在IE浏览器中resize事件执行多次