2010-12-07 2 views
1

У меня есть маску загрузки, которую я хотел бы fadeOut() после загрузки всей страницы. Он отлично работает при первом входе пользователя в страницу, но если они обновляются, маску загрузки исчезает до загрузки страницы. Я прочитал немало статей, и кажется, что общая проблема заключается в том, что загрузка $ (окна) обычно не запускает события из-за кеша, но в моем случае она запускается слишком быстро после обновления ... Что может быть проблема?

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

+0

Почему у вас есть window.load внутри Ext.onReady? – 2010-12-07 19:44:03

ответ

0

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; 
} 
Смежные вопросы