显示页面加载div直至页面加载完成的方法

技术文摘

2025-01-10 16:16:24 小编

在网页开发中，为了提升用户体验，常常需要在页面加载过程中显示一个加载提示div，让用户知道页面正在加载，待页面加载完成后再隐藏该div。下面将介绍几种实现这一功能的方法。

方法一：使用JavaScript的onload事件

JavaScript中的window.onload事件会在页面及其所有资源（包括图片、脚本等）都加载完成后触发。我们可以利用这个事件来控制加载div的显示和隐藏。

在HTML中创建加载div元素，并为其设置一个唯一的id，如“loadingDiv”。然后，在JavaScript代码中，当页面加载时，默认显示加载div，在window.onload事件触发时，隐藏该div。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div id="loadingDiv">页面正在加载，请稍候...</div>
  <script>
    document.getElementById('loadingDiv').style.display = 'block';
    window.onload = function () {
      document.getElementById('loadingDiv').style.display = 'none';
    };
  </script>
</body>

</html>

方法二：使用jQuery的ready和load方法

如果项目中使用了jQuery库，我们可以利用其提供的ready和load方法来实现。ready方法在DOM结构加载完成后触发，而load方法在所有资源加载完成后触发。

在HTML中同样创建加载div，然后在JavaScript代码中，通过jQuery的ready方法显示加载div，通过load方法隐藏加载div。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div id="loadingDiv">页面正在加载，请稍候...</div>
  <script>
    $(document).ready(function () {
      $('#loadingDiv').show();
    });
    $(window).load(function () {
      $('#loadingDiv').hide();
    });
  </script>
</body>

</html>

通过上述方法，我们可以轻松地实现显示页面加载div直至页面加载完成的效果，为用户提供更好的交互体验。

TAGS: 技术实现方法 DIV应用页面加载显示加载完成处理

万千站长工具

技术文摘

显示页面加载div直至页面加载完成的方法

欢迎使用万千站长工具！