window.onresize 在页面未完成时无效.(用domReady绑定的方法)
直接上代码：
[code="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Untitled Document function Show(){ this.init = function (){ domReady(set); } function set(){ if(!window.onresize){ window.onresize = resize; }else{ var old = window.onresize window.onresize = function (){ resize(); old(); } } } function resize(){ //do something alert("resize bind"); } //文档完成时 function domReady(fn){ var _timer_ = null; void function(){ if(document.all){ try{ document.documentElement.doScroll("left"); clearTimeout(_timer_,_timer_ = null, fn()); }catch(e){ _timer_ = setTimeout(arguments.callee,100); } }else{ document.addEventListener("DOMContentLoaded", fn, false); } }() } } function al(){ alert(window.onresize); } var ob = new Show(); ob.init();
[/code]
这个图片很大6百万像素，当我的dom树再在完成，但图片还未下载完成的时候,window.onresize绑定的方法不会被触发。请问有什么替代方案么？很奇怪的是window.onscroll绑定的方法又是可以作用的.
ie确实有此问题,我的解决办法是:
在页面加载时使用setInterval 一直比较窗口宽度,
当宽度改变时调用方法,
页面加载完取消interval.
代码如下:
[code="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
test1.html
<!---->
<br> <!--</p> <pre><code>wresize(function(){alert(2)}); function wresize(fn){ var width,height,interval; window.onresize=fn; window.onload=function(){ if(interval)clearInterval(interval); } interval=setInterval(function(){ var w=getWinSize(); width=width||w.width; height=height||w.height; if(width!=w.width||height!=w.height){ fn(); width=w.width; height=w.height; } },200); } function getWinSize(){ var winW, winH; if(window.innerHeight) { // all except IE winW = window.innerWidth; winH = window.innerHeight; } else if (document.documentElement&&document.documentElement.clientHeight){ // IE 6 Strict Mode winW = document.documentElement.clientWidth; winH = document.documentElement.clientHeight; } else if (document.body){// other winW = document.body.clientWidth; winH = document.body.clientHeight; } return {"width":winW, "height":winH}; } </code></pre> <p>//--><br>
[/code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
test1.html
<!---->
<br> <!--</p> <pre><code>wresize(function(){alert(2)}); function wresize(fn){ var width,height,interval; window.onresize=fn; window.onload=function(){ if(interval)clearInterval(interval); } interval=setInterval(function(){ var w=getWinSize(); width=width||w.width; height=height||w.height; if(width!=w.width||height!=w.height){ fn(); width=w.width; height=w.height; } },200); } function getWinSize(){ var winW, winH; if(window.innerHeight) { // all except IE winW = window.innerWidth; winH = window.innerHeight; } else if (document.documentElement&&document.documentElement.clientHeight){ // IE 6 Strict Mode winW = document.documentElement.clientWidth; winH = document.documentElement.clientHeight; } else if (document.body){// other winW = document.body.clientWidth; winH = document.body.clientHeight; } return {"width":winW, "height":winH}; } </code></pre> <p>//--><br>