$（window）.load更新時の不思議な動作

ページ全体がロードされたら、フェードアウトしたいローディングマスクがあります。ユーザーがページに初めて入ったときには完全に機能しますが、ページが読み込まれる前に読み込みマスクが消えてしまった場合、ページが読み込まれます。私はかなりの記事を読んだことがあります。一般的な問題は$（ウィンドウ）の読み込みは通常キャッシュのためにイベントを発生させないということですが、私の場合はリフレッシュするとあまりにも速く起動されます...問題？

1. <html> 
    2.  <head><script type="text/javascript"> 
    3.    Ext.onReady(function() {....}); 
    4.    $(window).load(function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);}); 
    5.  </script></head> 
    6.  <body> 
    7.    <div id="loading-mask"></div> 
    8.    <div id="loading"> 
    9.     <span id="loading-message">Loading Tibet...</span> 
    10.    </div> 
    11.  </body> 
    12. </html>

すべてのヘルプや指導をいただければ幸いです:)

おかげで、

elshae

出典

2010-12-07 elshae

なぜあなたはExt.onReadyの中にwindow.loadを持っていますか？ –

2回目は、ブラウザのすべての要素を利用できるので、ウィンドウのロードはできるだけ速くなります。 – kobe

@eshae、私はあなたがウィンドウのロードでこの種のエフェクトを行うべきではないと思います – kobe

[OK]をので、私はJavaScriptコードが体内に配置されている場合、それは最高だということが分かりました。..

これで、私はExt.onReadyを含むすべてのコードを体内に持っていますので、ここに行きます...

<html> 
     <head></head> 
     <body onload=""> 

      <div id="loading-mask"></div> 
      <div id="loading"> 
       <span id="loading-message">Loading Tibet...</span> 
      </div> 
      <script type="text/javascript"> 

      //Default blank image needed for some ExtJS widgets/if no image is found... 
      Ext.BLANK_IMAGE_URL = "./ext-3.2.1/resources/images/default/s.gif"; 

      Ext.onReady(function() { 
       ............. 
      }); 

//Outside Ext.onReady 
window.onload = function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);} 

</body></html> 

//The css is: 

#loading-mask { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    /*background: #D8D8D8;*/ 
    /* background: #6E6E6E;*/ 
    background: #000000; 
    opacity: .8; 
    z-index: 1; 
} 
#loading { 
    position: absolute; 
    top: 40%; 
    left: 45%; 
    z-index: 2; 
} 
#loading span { 
    /*background: url('ajax-loader.gif') no-repeat left center;*/ 
    background: url('globe.gif') no-repeat left center; 
    color: #BDBDBD; 
    width: 60%; 
    height: 30%; 
    padding: 60px 70px; 
    display: block; 
}

出典

2010-12-09 22:50:05 elshae

$（window）.load更新時の不思議な動作

答えて

関連する問題