8
11
2009

[JavaScript]解决页面onresize缩放时多次调用的问题

IE8简直太脆弱了,加了一段监听窗口缩放的代码就不时的挂掉

发现Gmail的邮件列表用到了监听浏览器窗口的事件,不一样的是设置了一个延迟执行,这样就解决了多次调用的问题

这样ie8挂掉的几率应该就小多了吧!

var timer = null;
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事件。

Category: JavaScript | Tags: javascript 页面缩放 | Read Count: 8241