Div 仅在页面加载完成时显示

Question

我有一个带有多个 simplexml_load_file($url) 请求的 php 页面，这些请求将数据放入一个表中。 我想显示一个“正在加载..”DIV，因为页面加载时间大约为 7 秒。

这是页面结构：

<HTML>
<HEAD>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<STYLE>
  <!-- css to style the loader -->
</STYLE>
</HEAD>
<BODY>
<div id="loader" class="center"></div> 
<div class="container">
<!-- Here I get data from multiple simplexml_load_file($url) requests and put data into a table -->
</div>
</div>
<script> 
        document.onreadystatechange = function() { 
            if (document.readyState !== "complete") { 
                document.querySelector( 
                  "body").style.visibility = "hidden"; 
                document.querySelector( 
                  "#loader").style.visibility = "visible"; 
            } else { 
                document.querySelector( 
                  "#loader").style.display = "none"; 
                document.querySelector( 
                  "body").style.visibility = "visible"; 
            } 
        }; 
    </script>          

</body>

</html>

发生的情况是页面加载器仅在页面加载完成并立即关闭时才会呈现。

为什么 loader 没有立即加载？

Answer 1

尝试这样思考/解决：

无论如何，在页面加载时默认使"loader"可见
加载所有数据后隐藏"loader"

换句话说：

不要用javascript设置"loader"的可见性！ 因为您可以假设（无论您的页面有多快）它无论如何都必须加载。 如果加载程序仅可见 1 毫秒，那就没问题了。 如果数据需要更长的时间来加载，您将看到更长的"loader" ，并且当页面准备好时，您只能通过 javascript 隐藏"loader" 。

旁注，我建议向加载器添加/删除一个类，然后该类具有来自 CSS 的相应样式。 在某些阶段，通过 javascript 添加内联样式可能会很烦人。

示例代码：

 var loader = document.querySelector('#loader'); setTimeout(function(){ // assume your page has finished loading here // after 3.5 sec loader.classList.remove('loading'); }, 3500);

 #loader { background-color: orange; display: none; } #loader.loading { display: block; }

 <div id="loader" class="loading">loading....</div> <h2>assume data is/was loading</h2>

Div 仅在页面加载完成时显示

问题描述

1 个解决方案

解决方案1
0 2020-01-18 11:02:23

Div 仅在页面加载完成时显示

问题描述

1 个解决方案

解决方案1 0 2020-01-18 11:02:23

解决方案1
0 2020-01-18 11:02:23