如果页面正在加载,则在 js 中显示加载器 - Javascript

在网页中，如果页面需要加载一些较大的资源（例如图片、视频、脚本等），这时候用户可能会感到页面加载变慢或者卡顿。因此，我们可以考虑使用一个加载器（Loader）来提示用户页面正在加载中，让用户对页面的加载进度有所了解。

在这篇介绍中，我们将会在Javascript中实现这一功能。

实现方法

我们可以通过以下步骤来实现在Javascript中显示加载器的功能：

1. 在HTML文档中添加加载器的HTML元素
2. 在CSS文档中定义加载器的样式
3. 在Javascript文档中通过事件绑定来控制加载器的显隐

1. 添加加载器的HTML元素

我们首先需要在HTML文档中添加一个加载器的HTML元素。这个元素可以是一个 <div> 或者其他容器元素。

<div id="loader-wrapper">
    <div id="loader"></div>
</div>

在这个例子中，我们使用一个带有ID属性的 <div> 元素作为容器。元素中包含了一个 ID 为 “loader”的子元素，这个子元素就是我们的加载器。

2. 定义加载器的样式

接下来我们需要为加载器定义样式。可以使用CSS中的 @keyframes 定义动画效果，让加载器在页面上旋转、跳动等。

#loader-wrapper {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
#loader-wrapper.show {
    opacity: 1;
    pointer-events: auto;
}
#loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid var(--primary-color);
    border-top-color: transparent;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

在这个例子中，我们为元素和子元素定义了一些基本样式，例如背景颜色、宽高等。我们还定义了一个CSS动画，通过 @keyframes 实现元素旋转的效果。

这个动画有两个关键帧，从 0% 到 100% 分别表示加载器的旋转角度从 0 度到 360 度。我们通过 transform:rotate() 属性来实现旋转的效果。

3. 通过事件绑定来控制加载器的显隐

最后我们需要通过Javascript来实现加载器的显隐。这可以通过事件绑定来实现。

var loaderWrapper = document.getElementById('loader-wrapper');
window.addEventListener('load', function() {
    loaderWrapper.classList.remove('show');
});

window.addEventListener('beforeunload', function() {
    loaderWrapper.classList.add('show');
});

在这个例子中，我们首先获取了加载器元素的引用。然后我们在 window.load 事件中移除了 “show” 类，实现隐藏加载器的效果。

当页面需要加载资源时，我们监听了 window.beforeunload 事件。在这个事件中，我们添加了 “show” 类来显示加载器。

效果

现在我们来看一下我们实现的效果：

总结

在这篇介绍中，我们介绍了如何使用Javascript实现在页面加载时显示加载器的效果。

我们首先添加了一个HTML元素作为加载器的容器，然后使用CSS样式来定义加载器的样式和动画。

最后，我们通过事件绑定来实现加载器的显隐。在 window.load 事件中，我们隐藏了加载器；在 window.beforeunload 事件中，我们显示了加载器。

这种方式可以有效地增强用户体验，让用户感知页面加载的进度，以及能够在加载过程中获得反馈，提高用户满意度。