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

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

javascript

Javascript 加载和显示gif图像时禁用页面内容的代码,javascript,Javascript,谁能帮我在加载和显示图像时如何保持整个页面处于非活动状态？我有以下代码来显示图像，但当页面加载时，所有内容都处于活动状态。下面是代码： <body onLoad="init()"> <div id="loading" style="position:absolute; width:100%; text-align:center;top:300px;"> <img src="https://bancore.com/images/vv/loading_sma

谁能帮我在加载和显示图像时如何保持整个页面处于非活动状态？我有以下代码来显示图像，但当页面加载时，所有内容都处于活动状态。下面是代码：

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

以下是示例网站：

请参阅加载页面时处于非活动状态。

在加载div上，您应该使用高度：100%，而不是顶部：300px，因为顶部仅将元素从顶部移动300像素，使页面顶部的300像素可单击

如果需要将图像向下移动300px，仍然需要将加载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：

   .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>

这是因为他们的图片元素加载div覆盖了整个页面，所以从技术上讲，您只能单击该div，而不能单击任何页面元素。

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

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