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

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像素可点击。

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

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

在这里摆弄

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

问题描述

2 个解决方案

解决方案1
0 2014-10-18 07:24:20

解决方案2
0 2014-10-18 07:28:58

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

问题描述

2 个解决方案

解决方案1 0 2014-10-18 07:24:20

解决方案2 0 2014-10-18 07:28:58

解决方案1
0 2014-10-18 07:24:20

解决方案2
0 2014-10-18 07:28:58