今天在优化页面响应式方面的代码时,遇到了一个window.resize的bug,只在在IE6/7上出现。正常情况下window.resize只会在浏览器窗口发生变化的情况下才会被触发,但在IE6/7上,如果body的宽度和高度发生了变化,也会触发resize事件,对于IE6/7来说,本来就性能不佳的情况下更是雪上加霜。对于我们的页面,由于,在ready完成之后会异步加载CSS,导致ready前后body会发生变化,使得在初始化页面的时候,IE6/7resize事件都会被触发,这是不能接受的。解决方案是将body高度变化触发的事件过滤掉。
var currentWidth = document.body.clientWidth,
currentHeight= document.body.clientHeight;
window.onresize = function(){
var clientWidth = document.body.clientWidth,
clientHeight = document.body.clientHeight;
if( clientWidth != currentWidth || clientHeight != currentHeight ) {
...
currentWidth = clientWidth;
currentHeight = clientHeight;
}
};