在IE浏览器下,一次resize事件被执行了多次。这是IE6和IE7的一个比较广为认知的问题,这个问题在这两个版本的浏览器中表现有所不同,通常IE6下会比IE7下更为糟糕。
现在已经有了一个较好的解决方案,让jquery.wresize.js这个jquery插件来帮你:
Js代码
复制代码 代码如下:
/*
===============================================================================
WResize is the jQuery plugin for fixing the IE window resize bug
...............................................................................
Copyright 2007 / Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: php">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:
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://www.hake.cc/kf/201109/"http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript" src=http://www.hake.cc/kf/201109/"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>
现在已经有了一个较好的解决方案,让jquery.wresize.js这个jquery插件来帮你:
Js代码
复制代码 代码如下:
/*
===============================================================================
WResize is the jQuery plugin for fixing the IE window resize bug
...............................................................................
Copyright 2007 / Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: php">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:
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://www.hake.cc/kf/201109/"http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript" src=http://www.hake.cc/kf/201109/"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>
标签:
resize事件,执行了多次
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“IE6浏览器下resize事件被执行了多次解决方法”评论...
更新日志
2025年05月07日
2025年05月07日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]