一个预先加载的好方法

 有些时候我们很希望在数据加载完成前给用户一个很好的加载提示

比如我们有一个在线游戏，需要在玩过1.swf后继续到2.swf；可是每个都比较大，中间跳转会很耗时

这时我们可以要求用户先行进行资源载入页，这里吧1,2,3...的资源都放到IFRAME里载入，然后给客户一个载入提示

 

 

<iframe  id="mm" width="50" width="50"  src="1.swf" οnlοad="javacript:alert('1');" onreadystatechange="checkload(this.readyState,wait1,over1);"></iframe>  
<br>
<div style="display: none" id="wait1">
   <h1>1    载入中....</h1>
</div>
<div style="display: none" id="over1">
   <h1>1    完成了!!!</h1>
</div>

<iframe  id="mm2" width="50" width="50" οnfοcus="javascript:setvalue();"  src="2.swf" οnlοad="javacript:alert('2');" onreadystatechange="checkload(this.readyState,wait2,over2);"></iframe>  
<br>
<div style="display: none" id="wait2">
   <h1>2   载入中....</h1>
</div>
<div style="display: none" id="over2">
   <h1>2   完成了!!!</h1>
</div>

 

  <script>
  function setvalue(value)
  { 
    frames["mm"].location.href="http://www.baidu.com";
    //form1.txt1.value=value;
  }
 
  function checkload(checkstatus,waitname,overname)
  {

    if (checkstatus=="interactive")
    {
     waitname.style.display="";
    }
    if (checkstatus=="loading")
    {
     waitname.style.display="";
    }
 
    if (checkstatus=="complete")
    {
  waitname.style.display="none";
     overname.style.display="";
    }
 

  } 
  </script> 

 

 

但发现一个问题，以上代码在浏览器按停止，会显示完成了，显然不合理！这个是IE的DOCUMNET的readStatus变化导致的

 

所以应该改写以上代码，在frame的load事件处理来显示完成的结果

 

<iframe  id="mm" width="50" width="50"  src="1.swf" οnlοad="loadcomplete(wait1,over1);" onreadystatechange="checkload(this.readyState,wait1,over1);"></iframe>  
<br>
<div style="display: none" id="wait1">
   <h1>1    载入中....</h1>
</div>
<div style="display: none" id="over1">
   <h1>1    完成了!!!</h1>
</div>

<iframe  id="mm2" width="50" width="50" οnfοcus="javascript:setvalue();"  src="2.swf" οnlοad="loadcomplete(wait2,over2);" onreadystatechange="checkload(this.readyState,wait2,over2);"></iframe>  
<br>
<div style="display: none" id="wait2">
   <h1>2   载入中....</h1>
</div>
<div style="display: none" id="over2">
   <h1>2   完成了!!!</h1>
</div>

 

  <script>
  function setvalue(value)
  { 
    frames["mm"].location.href="http://www.baidu.com";
    //form1.txt1.value=value;
  }

  function loadcomplete(waitname,overname)
  {

  waitname.style.display="none";
     overname.style.display="";

  } 
 
  function checkload(checkstatus,waitname,overname)
  {

    if (checkstatus=="interactive")
    {
  overname.style.display="none";
     waitname.style.display="";
    }
    if (checkstatus=="loading")
    {
  overname.style.display="none";
     waitname.style.display="";
    }
 

  } 
  </script> 

 

以上代码在IE6,7测试通过

 

这个自己扩展很方便，可以提高用户的交互效果，尤其是资源自身LOAD很耗时，完全可以先要求LOAD页来提示载入效果

然后再直接转入到新的页面，因为FRAME载入后很多资源已经在缓存里了，真正应用时就速度很快