$(window).load Strange Behavior on Refresh_问答_开发者

$(window).load Strange Behavior on Refresh

开发者 https://www.devze.com 2023-01-29 03:06 出处：网络

I have a loading mask that I would like to fadeOut() once the entire page has loaded. It works perfectly on the first time the user enters the page, but if they refresh, the loading mask disappears before the page has loaded. I have read quite a few articles out there and it seems that the common problem is that $(window)load usually doesn't fire events be开发者_如何学Pythoncause of cache, but in my case it is fired too quickly upon refresh...What could be the issue?

 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>

Any help or guidance would be greatly appreciated :)

Thanks,

elshae

Ok so I found out that it's best if JavaScript code is placed in the body..

So now I have all my code in the body including the Ext.onReady, so here goes...

    <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;
}