程序员人生 网站导航

onresize IE中多次执行问题

栏目:jscript时间:2013-11-14 18:25:21
页面上给window对象定义其onresize事件,在拉伸缩小窗口时,其onresize方法将被执行多次,影响页面性能。
网上查了些资料,说是在ie和opera中,只要窗口的边框移动一个像素,resize事件就触发;而在mozilla中,只在停止对窗口的大小改变时才触发resize 事件。
停止窗口大小改变时触发resize事件才是比较理想的。

我觉得onresize的触发是这样的:按照一个很短的间隔来判断,当你把200*200的窗口拖到200*400的时候中间要经过几次resize,从而触发几个onresize.

要避免多次onresize触发引起某个代码执行多次的不良后果,可以自己写个函数,在onresize之后间隔一个时间值(setTimeout)再调用你要执行的代码,通过置状态变量判断是否要执行,如果两次onresize的时间间隔小于100ms,就再setTimeout,等等看。

<script type="text/javascript">
var resizeTimer = null;
function doResize(){
alert("width="+document.documentElement.clientWidth + " Height="+document.documentElement.clientHeight);
resizeTimer=null
}
window.onresize = function(){
if(resizeTimer==null){
resizeTimer = setTimeout("doResize()",300);
}
}
</script>
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐