在网页应用中，用户访问时可能会遇到页面加载时间过长的问题。为了提高用户体验，我们需要在页面加载完成之前以一种友好的方式展示页面正在加载。本文将介绍如何在页面完成加载之前显示页面加载div。
HTML结构
首先，在HTML文件中添加一个div元素作为页面加载div：
<div id="loading"> <p>Loading...</p> </div>
CSS样式可以根据需求自行定义。
JavaScript代码
接着，使用JavaScript编写以下代码，用于在页面加载完成之后隐藏加载div：
window.addEventListener('load', function() {
const loading = document.querySelector('#loading');
loading.style.display = 'none';
});这段JS代码会监听页面加载事件（load），当页面加载完成后，获取#loading元素并将其 display 属性设为 none，从而隐藏页面加载div。
使用CSS动画效果
除了简单地显示和隐藏页面加载div之外，我们还可以使用CSS动画效果来增强用户体验。例如，在加载div中添加一个旋转动画：
-- -------------------- ---- -------
-------- -
---------- ---- -- ------ ---------
-
---------- ---- -
---- -
---------- -------------
-
-- -
---------- ---------------
-
-这段CSS代码定义了名为 spin 的动画，它将 #loading 元素旋转360度，持续时间为1秒，以线性方式无限循环播放。
总结
以上就是如何在页面完成加载之前显示页面加载div的方法。通过添加页面加载div并使用JavaScript和CSS代码控制其显示和隐藏，可以帮助提高用户体验。此外，我们还可以通过添加动画效果来增强页面加载div的视觉效果。
示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------- ---------------
-------
-------- -
---------- ---- -- ------ ---------
----------------- -----
------- -----
----- --
--------- ------
---- --
------ -----
-------- -----
-
-------- - -
---------- -----
----------- ----
----------- -------
---------- -----------------
-
---------- ---- -
---- -
---------- -------------
-
-- -
---------- ---------------
-
-
--------
-------
------
---- -------------
-----------------
------
--------
------------------------------- ---------- -
----- ------- - -----------------------------------
--------------------- - -------
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11214
