zjshhy 2010-07-22 13:59 采纳率: 100%
浏览 591
已采纳

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绑定的方法又是可以作用的.
  • 写回答

1条回答 默认 最新

  • kjah_1 2010-07-22 17:04
    关注

    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> &lt;!--</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&amp;&amp;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 {&quot;width&quot;:winW, &quot;height&quot;:winH}; } </code></pre> <p>//--&gt;<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> &lt;!--</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&amp;&amp;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 {&quot;width&quot;:winW, &quot;height&quot;:winH}; } </code></pre> <p>//--&gt;<br>




    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿