Question

任何人都可以帮我在加载和显示图片时如何保持整页不活动状态？我有以下代码来显示图像但在页面加载时所有内容都是活动的。这是下面的代码：

<body onLoad="init()">
  <div id="loading" style="position:absolute; width:100%; text-align:center;top:300px;">
    <img src="https://bancore.com/images/vv/loading_smaller.gif" border=0 />
  </div>
  <script>
    var ld = (document.all);
    var ns4 = document.layers;
    var ns6 = document.getElementById && !document.all;
    var ie4 = document.all;
    if (ns4)
      ld = document.loading;
    else if (ns6)
      ld = document.getElementById("loading").style;
    else if (ie4)
      ld = document.all.loading.style;
    function init() {
      if (ns4) { 
        ld.visibility = "hidden";
      } else if (ns6 || ie4) ld.display = "none";
    }
  </script>
</body>

以下是示例网站：http://www.bancore.com/

加载页面时看到无效。

Answer 1

在#loading div上，你应该使用height: 100%代替top: 300px，因为top只会将元素从顶部移动300像素，使页面的前300个像素可以点击。

如果您需要将图像向下移动300px，您仍然需要将#loading div固定在顶部，但您可以将图像的上边距设置为300px。像这样：

<div id="loading" style="position:absolute; width:100%; height: 100%; text-align:center;">
    <img src="https://bancore.com/images/vv/loading_smaller.gif" border=0 style="margin-top:300px;">     
</div>

您还应该避免使用内联样式，只需在CSS文件中设置CSS规则：

#loading {
    position:absolute;  
    width:100%; 
    height: 100%; 
    text-align:center;
}

#loading img {
    margin-top: 300px;
}

Answer 2

在这种情况下的想法是在您的网站上创建一个“掩码”，然后在document is ready时将其删除。

创建CSS：

   .loading { 
     position: fixed; // position fixed with height, width = 100% will take over your window
     width:100%;
     height: 100%;
     top : 0; 
     left : 0;
     text-align : center;
     background : #ccc;
     opacity : 0.5; // fade your page.
   }
   .loading img {
     // I'm not good at CSS, so you can find some attribute to center it
     //check my fiddle for style
    }

添加到HTML：

<div id="loading" class="loading">
       <img src="https://bancore.com/images/vv/loading_smaller.gif" border=0>     
</div>

和Javascript jQuery文档准备就绪：

$(document).ready(function() {
   $('#loading').removeClass('loading'); // the `class` loading will be remove
})

Fiddle here

代码在加载时禁用页面内容并显示gif图像

2 个答案: