Question

我有一个加载蒙版，我想在整个页面加载后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

Answer 1

好的，所以我发现最好将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;
}

$（window）.load刷新时的奇怪行为

1 个答案: