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

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

javascript html

Javascript Div仅在页面加载完成时显示,javascript,html,Javascript,Html,我有一个php页面，其中包含多个simplexml加载文件（$url）请求，这些请求将数据放入一个表中。我想显示一个“loading…”DIV，因为页面加载时间约为7秒这是页面结构： <HTML> <HEAD> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.boot

我有一个php页面，其中包含多个simplexml加载文件（$url）请求，这些请求将数据放入一个表中。我想显示一个“loading…”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>


document.onreadystatechange=函数（）{
如果（document.readyState！=“完成”）{
document.querySelector（
“body”）.style.visibility=“hidden”；
document.querySelector（
“#加载程序”）.style.visibility=“可见”；
}否则{
document.querySelector（
“#loader”）.style.display=“无”；
document.querySelector（
“body”）.style.visibility=“可见”；
} 
};

发生的情况是，页面加载程序仅在页面加载完成并立即关闭时才呈现

为什么加载程序不能立即加载？

试着这样思考/解决：

在页面加载时，无论发生什么情况，默认情况下都要使“加载程序”可见

加载所有数据时，隐藏

“加载程序”

换言之：

不要用javascript设置

“加载程序”

的可见性！因为你可以假设（不管你的页面有多快）无论如何都要加载。如果装载机仅在1ms内可见，则可以。如果数据需要更长时间才能加载，您将看到

“加载程序”

更长时间，并且当页面准备就绪时，您只能通过javascript隐藏

“加载程序”

附带说明，我建议在加载程序中添加/删除一个类，该类随后具有来自CSS的相应样式。在某些阶段，通过javascript添加内联样式可能会让人恼火

示例代码：

var-loader=document.querySelector（'#loader'）；
setTimeout（函数（）{
//假设您的页面已在此处完成加载
//3.5秒后
loader.classList.remove（'loading'）；
}, 3500);
#加载器{
背景颜色：橙色；
显示：无；
}
#装载机{
显示：块；
}
正在加载。。。。
假设数据正在加载
尝试这样思考/解决：
在页面加载时，无论发生什么情况，默认情况下都要使“加载程序”可见
加载所有数据时，隐藏“加载程序”
换言之：
不要用javascript设置“加载程序”
的可见性！因为你可以假设（不管你的页面有多快）无论如何都要加载。如果装载机仅在1ms内可见，则可以。如果数据需要更长时间才能加载，您将看到“加载程序”
更长时间，并且当页面准备就绪时，您只能通过javascript隐藏“加载程序”
附带说明，我建议在加载程序中添加/删除一个类，该类随后具有来自CSS的相应样式。在某些阶段，通过javascript添加内联样式可能会让人恼火
示例代码：

var-loader=document.querySelector（'#loader'）；
setTimeout（函数（）{
//假设您的页面已在此处完成加载
//3.5秒后
loader.classList.remove（'loading'）；
}, 3500);
#加载器{
背景颜色：橙色；
显示：无；
}
#装载机{
显示：块；
}
正在加载。。。。
假设数据正在/正在加载
PHP在服务器上运行，而不是在用户的浏览器中运行。因此，在simplexml\u load\u文件（$url）
完成之前，您的页面甚至不会完成发送给用户。如果您想在用户的浏览器中使用“loading…”div加载页面内容，您需要使用Javascript而不是PHP。谢谢，为了安全起见，我没有找到从Javascript而不是PHP加载xml文件的方法。从浏览器加载xml或JSON有上千个在线教程。一个普通的谷歌应该能找到所有关于如何做到这一点的信息，但最基本的是有一个php文件专门用于生成具有正确标题的XML文件（而不是“作为网页的一部分”），然后让你的页面JS使用该url调用。最大的问题是，你的页面有7秒的加载时间。甚至一秒钟都太长了。您应该尝试了解如何加载lazy load data.PHP在服务器上运行，而不是在用户的浏览器中运行。因此，在simplexml\u load\u文件（$url）
完成之前，您的页面甚至不会完成发送给用户。如果您想在用户的浏览器中使用“loading…”div加载页面内容，您需要使用Javascript而不是PHP。谢谢，为了安全起见，我没有找到从Javascript而不是PHP加载xml文件的方法。从浏览器加载xml或JSON有上千个在线教程。一个普通的谷歌应该能找到所有关于如何做到这一点的信息，但最基本的是有一个php文件专门用于生成具有正确标题的XML文件（而不是“作为网页的一部分”），然后让你的页面JS使用该url调用。最大的问题是，你的页面有7秒的加载时间。甚至一秒钟都太长了。您应该尝试了解如何加载延迟加载数据。我只是尝试在默认情况下使“加载程序”可见。问题是，由于php调用，在php完成执行调用之前，页面不会完全发送到浏览器。我猜您发送回浏览器的“第一部分”需要包含加载程序。也许从那里你可以通过ajax（XMLHttpRequest）获得页面的其余部分？用户所做的只是输入一个URL，然后得到一个响应（比如从PHP（服务器））PHP无法用部分内容“回答”。PHP将被执行，并收集它需要的所有数据，然后在所有工作完成后返回答案。我只是尝试在默认情况下使“加载程序”可见。问题是，由于PHP调用，页面在PHP完成执行调用之前不会完全发送到浏览器。我猜是“第一部分”您发送回浏览器时需要包含加载程序。也许从那里你可以通过ajax（XMLHttpRequest）获得页面的其余部分？全部的