解决 IE6 IE7 onresize的bug

IE下给window对象定义其onresize事件,在拉伸缩小窗口时,其onresize方法将被执行多次,并且其具体执行的次数在不同的电脑有不同的值,相当诡异,Firefox等其他浏览器则无此现象。具体可参看这一篇文章《window.onresize
hangs IE6 and IE7》

高阶函数debounce 正是为此而生的

 

[javascript] view
plain
copy

  1. /** 
  2.  * IE下 window.onresize 有bug 可以使用debounce封装监听函数  
  3.  * see http://blog.csdn.net/fudesign2008/article/details/7035537 
  4.  * @author FuDesign2008@163.com 
  5.  * @date   2011-11-30 
  6.  * @time   下午04:02:55 
  7.  */  
  8.   
  9. /** 
  10.  * 
  11.  * @param {Function} callback 回调函数 
  12.  * @param {Integer} delay   延迟时间,单位为毫秒(ms),默认150 
  13.  * @param {Object} context  上下文,即this关键字指向的对象,默认为null 
  14.  * @return {Function} 
  15.  */  
  16. function debounce(callback, delay, context){  
  17.     if (typeof(callback) !== "function") {  
  18.         return;  
  19.     }  
  20.     delay = delay || 150;  
  21.     context = context || null;  
  22.     var timeout;  
  23.     var runIt = function(){  
  24.             callback.apply(context);  
  25.         };  
  26.     return (function(){  
  27.         window.clearTimeout(timeout);  
  28.         timeout = window.setTimeout(runIt, delay);  
  29.     });  
  30. }  
  31. var winResizeHandler = function(event){  
  32.       console.log("window resized");  
  33. };  
  34.   
  35. window.onresize= debounce(winResizeHandler, 300);  

非常不错的解决方案

时间: 2024-09-11 09:31:19

解决 IE6 IE7 onresize的bug的相关文章

如何解决IE6/IE7不识别display:inline-block属性

ie6,ie7的haslayout属性是个让人头疼的问题.在做导航条的时候,一般会用到ul li结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行.还有一种方法就是设置li为display:inline;这样可以达到同样的效 果,但是问题是inline元素的特性:默认无法设置宽度,高度,以及上下margin,(关于padding,情况有点特殊,在ie6,7中 inline元素是无法设置上下padding的,但是在标准浏览器里面是可以设置上下padding的). 鉴于inline元素的这

IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题_jquery

本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题:分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文. var resizeTimer = null; $(window).resize(function() { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout("alert('mm')",

js完美解决IE6不支持position:fixed的bug

  关于IE6,虽然它已被微软抛弃很久了,但是由于大天朝的特殊行情(盗版)对于前端工程师来说,解决IE6兼容position:fixed的问题显得很重要.特别是你需要用到头尾悬停调用的时候 先来看段代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ

自己开发遇到的坑IE7 图片scrollTop BUG解决方法

IE7 图片scrollTop BUG解决方法:

解决IE6 3像素Bug的css写法_经验交流

只要触发IE的hasLayout,非浮动元素就会拥有布局.所以,利用IE6特有的hack规则,为它单独写样式就可修复此问题: _zoom:1; margin-left: value; _margin-left: value-3px; zoom 是IE触发Layout条件之一,因为它是IE特有的CSS规则,所以采用zoom. margin-left: value-3px 是修复IE6 中3px 的bug. 此前采用非浮动元素也浮动的方法修复bug,现在我们可以试试这个新的方法了! 注:前面的下划线

!important在ie6下的一个BUG和CSS的优先级。

在没有DTD的声明的情况下,在同一个选择器样式(即同一个大括号里面)下,IE6,IE7,IE8对!important的解析都是无效的. 一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢

CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流

关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 

ie6 ie7 ie8 ie9和FireFox Chrome中css区别总结

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 wid

DIV+CSS网页兼容所有主流浏览器技巧(IE6/IE7/IE8/IE9/Firefox/Chrome)

CSS兼容常用技巧 请尽量用xhtml严格格式写代码,一定要加DOCTYPE声明,因为DOCTYPE影响CSS处理,影响W3C标准. 1.div中文字的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案是在这个div里面加上display: