先了解一下浏览器拖拉触发resize的方式。
例如在xp的系统性能选项中,设置是否“拖拉时显示窗口内容”会有不同的拖拉效果:
选择是的话,由于内容会跟着浏览器的拖拉同时渲染页面,导致resize事件的持续触发;
选择否的话,内容在拖拉完成才会渲染,并触发resize事件,即在拖拉过程中resize事件只会在确定后才触发一次;
不过ff有点特殊,即使选择否,它右下角的触发点还是会按照拖拉同时渲染页面的方式触发的。
后面测试时建议选择否,会比较准确看到结果。
再看看resize事件的支持情况。
在ie,haslayout的块级和内联元素都支持onresize事件,其他浏览器只有window对象支持。
而ie6/7跟ie8的支持程度也有不同,测试以下代码:
Assembly code
<!doctype html>
<body>
<div id="show">0</div>
<div id="div" style="border:1px solid #000"></div>
<script>
var i = 0;
div.onresize = function(){ show.innerHTML = ++i; }
setTimeout('div.innerHTML="test"', 1000)
setTimeout('div.style.height="50px"', 2000)
</script>
</body>
</html>
在ie8两种情况都会触发onresize,但ie6/7只有第二种情况触发。
鉴于情况比较复杂,程序在使用window作为容器时才绑定事件,其他情况请自行设置。
resize事件有不少的问题,处理时要小心。
chrome的resize有一个问题(bug?),每次触发resize都会执行两次事件,或者说会触发两次。
而ie就复杂了,window, body和documentElement的resize会相互影响。
在ie8测试以下代码:
Assembly code
<!doctype html>
<style>html,body{border:5px solid #06F;}</style>
<body><div id="div" style="height:100px;"></div></body>
</html>
<script>
window.onresize = function(){ div.innerHTML += "window, "; }
//document.documentElement.onresize = function(){ div.innerHTML += "documentElement, "; }
//document.body.onresize = function(){ div.innerHTML += "body, "; }
</script>
当上下拖放时,onresize只会触发一次,但左右拖放时会触发两次。
换成documentElement会有差不多的结果,两个一起用的话左右拖放时documentElement会触发两次,window一次。
只设置body的话感觉就正常了,上下左右都只会触发一次。
而documentElement和body同时设置的效果跟documentElement和window的效果差不多。
如果window和body同时设置的话,后一个会覆盖前一个。
看来window和body的onresize对应的是同一个对象事件,可能为了在body设置也能做到window一样的效果。
个人推测,window和documentElement多出的一次,可能是同时触发了body的resize造成的。
ps:onresize时,用srcElement获取不到触发元素,所以确定不了是哪个元素触发。
ie7跟ie8的结果差不多,ie6就有些不同,不过估计也是盒模式的不同造成的。
具体产生原因还不清楚,这里我也很糊涂。
虽然问题弄不清楚,解决方法还是有的。
要绑定resize就是因为视框范围发生了变化,要重新设置视框范围,那么可以通过看两次resize之间视框范围有没有变化来确实是否执行程序。
在上次写的Lazyload效果中,就是通过clientWidth和clientHeight来判断的:
Assembly code
this.resizeDelay = function(){
var clientWidth = container.clientWidth,
clientHeight = container.clientHeight;
if( clientWidth != width || clientHeight != height ) {
width = clientWidth; height = clientHeight;
oThis._delay( oThis.resize );
}
};
ps:如果只需针对window,直接用innerHeight/innerWidth就不用理会文档模式了。
分享到:
相关推荐
解决firefox下resize事件无效问题
resize事件演示.html
通过resize事件实现随着窗口大小的变化里面的控件大小也随之变化,left,top等等上下左右都会随动
浏览器窗口大小变化时使用resize事件对框架不起作用的解决办法,如下: 代码如下:$(window).resize(function(){var surH = $(window).height();$(“.pic_conent”).height(surH);} 当浏览器变化,拉大拉小时,没有...
需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化。 比如我用canvas绘制了一个chart,当canvas的size发生...对于div的resize事件的监听,实现方式有很多,比如周期性检查,通过scroll事件等等,本文
ie的resize事件只要拖拽不放手就会一直执行很多很多遍的resize事件。需要用到这个js就能解决这个bug啦
这是某位大神写的jquery下div 的resize事件。 代码如下: //resize of div (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = “setTimeout”, j = “resize”, d = j + “-...
它利用了HTMLObjectElement上的resize事件,可在我所知道的任何浏览器上运行,并且它是超轻量级的。 此外,它不会直接更改DOM,一切都由React处理。 寻找2.0文档? 安装 yarn add react-resize-aware 或使用npm:...
火狐下resize无效解决方案,解决火狐下资源resize事件无效问题方法
只要把resize.mde抄到你的程序目录下,然后打开你的程序,在工具菜单中选择[引用],引用resize.mde即可(你需进入代码状态才能看到工具菜单中的引用子菜单),最后在你自己程序的窗体中的resize事件中加入 ...
resizeWindow.txt resizeWindow.txt resizeWindow.txtresizeWindow.txtresizeWindow.txt resizeWindow.txt resizeWindow.txt resizeWindow.txt
<br>RESIZE 应用程序还利用了一部分由处理 WM_NCHITTEST 消息提供了灵活性。 Windows 向应用程序与鼠标位置发送此消息并期望应用程序能够描述的窗口, 包括鼠标位置部分。 经常, 应用程序传递到 DefWindowProc...
resize事件是在窗口或框架的大小被调整时发生,包括最小化、最大化。在IE和Opera浏览器中,只要窗口边框被拖动,就触发该事件,在Mozilla浏览器中,resize 事件只是在停止改变窗口大小时才会触发。
易语言模块ReSize.rar 易语言模块ReSize.rar 易语言模块ReSize.rar 易语言模块ReSize.rar 易语言模块ReSize.rar 易语言模块ReSize.rar
* [removed] 事件 专用事件绑定器 v0.1 Alucelx * http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html * <description> * 用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次...
bilinear resize code embedded
matlab实现resize函数,调用方法为MyResize(I,scale,method),其中I为图像读入矩阵,scale为放大或缩小的系数,method支持nearest和bilinear两种方式
use directshow to resize
jquery的resize()事件,直接调用没有起作用引入该文件来实现resize()方法。
[removed] 事件 专用事件绑定器 v0.1,用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG.