加载屏幕 html css js - Javascript

在 Web 开发中，加载屏幕是指在网页加载时显示的等待动画或静态图片。加载屏幕可以帮助提高用户体验，让用户知道网页正在加载中，避免用户认为网页已经崩溃无法访问。

在本文中，我们将介绍如何使用 HTML、CSS 和 JavaScript 制作加载屏幕。

HTML

首先，我们需要在 HTML 中添加一个加载屏幕的跨域 div 元素。下面是一个例子：

<div id="loader">
  <div class="inner-loader"></div>
</div>

其中，#loader 是加载屏幕的容器，inner-loader 是实际的加载动画/图片，可以根据需求进行修改。

CSS

接下来，我们需要使用 CSS 对加载屏幕进行样式设置。下面是一个基本的样式设置：

#loader {
  position: fixed; /* 使其固定在屏幕上 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999; /* 在所有元素之上 */
  background-color: #fff;
}

.inner-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
  width: 50px;
  height: 50px;
  background-color: #000;
  /* 这里可以添加动画效果 */
}

在上面的代码中，我们将 #loader 固定在屏幕上，并设置了其背景颜色和 z-index。对于 inner-loader，我们使用了 position、top 和 left 将其居中，并设置了其背景颜色为黑色。

JavaScript

最后，我们需要在 JavaScript 中监听页面是否加载完成，并隐藏加载屏幕。下面是代码：

window.addEventListener("load", function() {
  const loader = document.getElementById("loader");
  loader.style.display = "none";
});

在上面的代码中，我们使用 window.addEventListener 监听页面是否加载完成。如果页面已经加载完成，我们就将加载屏幕的 display 属性设置为 none，从而隐藏它。

结论

通过本文的介绍，我们可以看到如何使用 HTML、CSS 和 JavaScript 来制作加载屏幕，并在加载完成后隐藏它。当然，上面的例子只是一个基本的实现，您可以根据实际需求进行修改和改进。