加载时显示 div - Html

在 Web 开发中，我们经常需要在页面加载时显示一个加载中的提示，以让用户知道页面正在加载数据，避免用户对于页面的反应变得缓慢。为此，我们可以使用 div 元素作为一个加载提示，显示在页面上，等待数据加载完成后再隐藏。

以下是如何在页面加载时显示 div 的示例代码：

<div id="loading">Loading...</div>

我们可以使用 CSS 设置 div 的样式，如下所示：

#loading {
  display: none; /* 隐藏 div */
  position: absolute; /* 绝对定位 */
  top: 50%; /* 位置居中 */
  left: 50%;
  transform: translate(-50%, -50%); /* 通过 transform 属性调整位置，使 div 在页面中间 */
  background-color: #333;
  color: #fff;
  padding: 20px;
  border-radius: 4px;
}

在 JavaScript 中，我们可以监听页面加载事件，当页面加载完毕后隐藏加载提示。下面是示例代码：

window.addEventListener('load', function() {
  var loading = document.getElementById('loading');
  loading.style.display = 'none';
});

上面的代码中，我们使用 window 的 load 事件来监听页面加载完成。当页面加载完成后，我们获取 id 为 loading 的 div 元素，通过样式来隐藏加载提示。

有一些库和框架可以帮助我们更方便地显示加载提示，如 Bootstrap、jQuery、Vue 等。它们提供了自带的加载提示组件，使用起来更加简单方便。

在 Web 开发中，给用户提供一个友好的界面体验非常重要。使用加载提示，可以让用户知道页面正在加载数据，从而避免用户在等待时对于页面的反应变得缓慢。