网上找了一些ie6、7这个著名bug的解决方案,要么要延时要么将onresize绑定到div或者body上感觉总不是那么严谨。找了一个感觉严谨的,供大家参考代码如下
/**
* window.onresize 事件 专用事件绑定器 v0.1 Alucelx
* http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html
* <description>
* 用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG.
* </description>
* <methods>
* add: 添加事件句柄
* remove: 删除事件句柄
* </methods>
*/
var onWindowResize = function(){
//事件队列
var queue = [],
indexOf = Array.prototype.indexOf || function(){
var i = 0, length = this.length;
for( ; i < length; i++ ){
if(this[i] === arguments[0]){
return i;
}
}
return -1;
};
var isResizing = {}, //标记可视区域尺寸状态, 用于消除 lte ie8 / chrome 中 window.onresize 事件多次执行的 bug
lazy = true, //懒执行标记
listener = function(e){ //事件监听器
var h = window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || document.body.clientHeight,
w = window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || document.body.clientWidth;
if( h === isResizing.h && w === isResizing.w){
return;
}else{
e = e || window.event;
var i = 0, len = queue.length;
for( ; i < len; i++){
queue[i].call(this, e);
}
isResizing.h = h,
isResizing.w = w;
}
};
return {
init: function(){
if(lazy){ //懒执行
if(window.addEventListener){
window.addEventListener('resize', listener, false);
}else{
window.attachEvent('onresize', listener);
}
lazy = false;
}
},
add: function(fn){
if(typeof fn === 'function'){
this.init();
queue.push(fn);
}else{ }
return this;
},
remove: function(fn){
if(typeof fn === 'undefined'){
queue = [];
}else if(typeof fn === 'function'){
var i = indexOf.call(queue, fn);
if(i > -1){
queue.splice(i, 1);
}
}
return this;
},
insert: function(index,fn){
if(typeof fn === 'function'){
this.init();
var len=queue.length;
if(index>=len){
queue[index]=fn;
}else{
for(var i=len-1;i>=index;i--){
queue[i+1]=queue[i];
}
queue[index]=fn;
}
}else{ }
return this;
},
trigger: function(){
var len=queue.length;
for(var i=0;i<len;i++){
queue[i]();
}
}
};
}.call(this);
分享到:
相关推荐
2. 对于IE6和IE7,创建一个全屏div监听resize事件,以减少事件触发的频率,提高浏览器稳定性。 这两种方法结合使用,可以在保证页面响应性的同时,有效防止旧版IE浏览器因resize事件过多调用导致的性能问题。
火狐下resize无效解决方案,解决火狐下资源resize事件无效问题方法
解决方案: 代码如下:// IE浏览器下将onresize事件放在div上if(navigator.userAgent && navigator.userAgent.toLowerCase().indexOf(“msie”)>-1){ document.body[removed] = ‘<div onresize=”...
浏览器窗口大小变化时使用resize事件对框架不起作用的解决办法,如下: 代码如下:$(window).resize(function(){var surH = $(window).height();$(“.pic_conent”).height(surH);} 当浏览器变化,拉大拉小时,没有...
总的来说,解决IE6的"fixed"定位bug需要结合CSS的hack和JavaScript,以模拟现代浏览器中的"fixed"定位行为。虽然这种方法可以达到预期效果,但同时也增加了代码的复杂性和可能的性能问题。在现代浏览器广泛使用的...
JavaScript中的onresize事件是一个非常实用的属性,它可以监测并响应浏览器窗口大小的调整。在我们进行响应式网页设计或者需要根据浏览器窗口大小调整某些元素尺寸时,onresize事件就显得尤为重要。 首先,我们要...
为了解决IE浏览器中resize事件执行多次的问题,一种常见的解决方案是使用延时器(debounce)技术。这通常是通过设置一个定时器,在resize事件触发时清除已存在的定时器,并重新设置一个新的定时器。当定时器内的函数...
6. **onResize**:窗口大小改变时触发。IE4、N4及O版本支持。 7. **onScroll**:页面滚动时触发。IE4、N及O版本支持。 8. **onStop**:页面加载被停止时触发。IE5、N及O版本支持。 9. **onUnload**:页面被卸载时...
增加了IE6/IE7/IE8 启用设置参数(ieLowVersionEnabled: true|false) ,默认不启用, 注:IE6/7/8锁定表头 由于兼容性问题,有些情况下会有一些错位的问题 1.5 增加了 显示/隐藏功能,修正了非IE浏览器下列宽错位...
这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器窗口大小改变时触发事件的功能。以下是关于这一知识点的详细解析。 首先,我们了解window对象。在浏览器中,window对象表示一个...
window 的 onload、onresize、onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加。也就是说,它只能这样来(以 onload 为例,下同): 代码如下: [removed] = function() { // ...
1. **使用`window.onresize`事件** 这是最基础的实现方式,通过监听窗口的resize事件,调用ECharts的`resize()`方法来更新图表的大小。代码示例如下: ```javascript let myChart = echarts.init(document....
### JavaScript鼠标事件大全 在JavaScript编程中,鼠标事件是非常重要的交互元素之一,它们允许开发者捕捉用户的鼠标动作,并根据这些动作触发相应的脚本处理。本文将详细介绍JavaScript中的各种鼠标事件及其特性,...
### 鼠标事件总结与解析 #### 一、鼠标事件概述 在Web开发中,鼠标事件是非常重要的交互方式之一,它们允许开发者响应用户的鼠标操作,从而实现动态和交互式的网页体验。以下是一些常见的鼠标事件及其具体描述: ...
### JS中的事件分类详解 JavaScript(简称JS)作为前端开发的核心技术之一,广泛应用于网页交互设计与动态效果实现。为了更好地理解和应用JS事件,本文将详细介绍JS中的各种事件及其应用场景。 #### 1. 鼠标事件 ...
### JS鼠标事件大全详解 JavaScript 是一种广泛应用于网页开发中的脚本语言,它能够通过处理各种事件来增强页面的交互性。其中,鼠标事件是非常重要的一部分,它们允许开发者响应用户的鼠标操作,比如点击、移动等...
为解决这个问题,我们可以采用绝对定位配合`onresize`事件来实现div的自适应。 以下是实现步骤: 1. 使用绝对定位设置div的初始位置。例如,我们可以设定左右边距,这样在屏幕大小改变时,通过调整这些边距可以使...
6. **onResize(调整大小事件)**: - **描述**:当浏览器窗口大小发生变化时触发。 - **示例用途**:实现响应式设计,调整页面布局。 - **兼容性**:IE4及以上版本、Netscape4及以上版本、Opera支持。 7. **...