如何使预加载器在 html 中消失 - Javascript (1)

📌 相关文章

📜 如何使预加载器在 html 中消失 - Javascript (1)

📅 最后修改于: 2023-12-03 15:24:02.311000 🧑 作者: Mango

如何使预加载器在 html 中消失 - Javascript

当网页加载较长时间时,常常会看到预加载器(loading spinner),这是一个圆形图标,通常在页面中央或者页面上方,提示用户页面正在加载中。但是,当页面加载完毕后,这个预加载器应该被删除或者隐藏起来。在本文中,我们将探讨如何使用Javascript,实现在页面加载完毕后,自动删除或者隐藏预加载器。

首先,我们需要创建一个 HTML 页面,在页面头部或者 body 标签下,添加一个 div 标签,用作预加载器的容器。以下是示例代码:

<!DOCTYPE html>
<html>
  <head>
    <title>如何使预加载器在 html 中消失</title>
  </head>
  <body>
    <div id="spinner">预加载器</div>
    <h1>欢迎来到我的网站</h1>
  </body>
</html>

在CSS中创建预加载器的样式.以下是示例代码:

#spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

现在,预加载器已经创建完成.当页面加载完成后,我们需要使用Javascript来实现自动删除或者隐藏预加载器的功能。

删除预加载器

要删除预加载器,我们需要找到预加载器(div) 元素，然后将其从页面中移除。以下是示例代码:

// 当页面加载完成后, 删除预加载器:
window.addEventListener('load', function() {
    var spinner = document.getElementById('spinner');
    spinner.parentNode.removeChild(spinner);
});

代码解析：

使用 window.addEventListener()函数监听 load 事件,当页面加载完成后,会触发该事件。
获取预加载器(div) 元素的引用,并将其存储在变量 spinner 中。
然后,使用 spinner.parentNode.removeChild(spinner) 语句来删除该元素。

隐藏预加载器

如果你想隐藏预加载器而不是完全删除它,可以将其 CSS display 属性设置为 "none"。以下是示例代码:

// 当页面加载完成后, 隐藏预加载器:
window.addEventListener('load', function() {
    var spinner = document.getElementById('spinner');
    spinner.style.display = 'none';
});

代码解析：

使用 window.addEventListener()函数监听 load 事件,当页面加载完成后,会触发该事件。
获取预加载器(div) 元素的引用,并将其存储在变量 spinner 中。
使用 spinner.style.display = 'none' 语句来隐藏该元素。

现在,我们的预加载器已经在页面加载完成后被删除或者隐藏了。通过学习本文,你已经了解了如何使用Javascript 实现删除或者隐藏预加载器的方法,并能在实际项目中应用此技术。