IE8简直太脆弱了,加了一段监听窗口缩放的代码就不时的挂掉
发现Gmail的邮件列表用到了监听浏览器窗口的事件,不一样的是设置了一个延迟执行,这样就解决了多次调用的问题
这样ie8挂掉的几率应该就小多了吧!
var timer = null;
window.onresize(function(){
if(timer == null){
timer = setTimeout(function(){
//缩放后你要执行的代码
doWhatUWant();
timer = null;
},200);
}
});
window.onresize(function(){
if(timer == null){
timer = setTimeout(function(){
//缩放后你要执行的代码
doWhatUWant();
timer = null;
},200);
}
});
update:
今天继续测试页面时,ie8再次假死,怨念
也就是说设置这样一个延迟操作只能让挂掉的几率变小,但是我正在做这个是一个聊天的页面,一旦是挂掉了,聊天信息就全没了,用户会发疯的
于是继续搜索找到了下面的这个解决方法
传送:feiyu.asgard.cn/article_225.html
解决IE6,IE7下resize事件不断触发造成浏览器假死的问题
注：本示例采用jquery，原理都通用，用其他库或是不用库，只要改下代码即可。
有时，我们要在网页的resize事件中执行相关js代码。但是在ie6,ie7下，如果你缩放浏览器，resize事件会不断触发，造成假死现 象。把以下代码存为html文件，加上jquery.js，然后在ie6,ie7下打开，然后缩放下试试（假死后请用任务管理器结束任务）：
<!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"> <head> <title>1</title> <script src="jquery.js"></script> <script> var i=0; $(function() { $(window).resize(function() { $("body").append("<p>" + (++i) + "</p>"); }); }); </script> </head> <body></body> </html>
为了解决该问题，以前采用setTimeout和clearTimeout来做，但是效果并不理想。虽然不会假死了，但测试结果是resize事件 还是会不断被执行，在资源管理器中监视时发现resize几次后CPU占用就上去了（根据setTimeout所定的延迟决定占用量）。
经过GOOGLE及反复试验，终于有较好解决该问题的方法。先看代码：
<!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"> <head> <title>3</title> <script type="text/javascript" src="jquery.js"></script> <script> var i=0; $(function() { if($.browser.msie && ("6.0,7.0".indexOf($.browser.version) != -1)) { $("body").append( '<div id="fix-ie-resize" style="width:100%;height:100%;position:absolute;z-index:-999;"></div>' ); $("#fix-ie-resize").resize(function() { $("body").append("<p>" + (++i) + "</p>"); }); } else{ $(window).resize(function() { $("body").append("<p>" + (++i) + "</p>"); }) } }); </script> <style> body{margin:0;} </style> </head> <body> </body> </html>
代码意思为：
判断浏览器是否是IE6或IE7，如果是的话，向body中加入一个长宽都是100%的无内容层，并且把resize事件绑定在该层上。
如果是其他浏览器，则直接绑定到window的resize事件。
