开发者

$(window).load Strange Behavior on Refresh

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜