漂亮实用的页面loading(加载)封装代码

下面是详细的“漂亮实用的页面loading(加载)封装代码”的攻略。

什么是页面loading？

在访问网站页面的过程中，如果页面需要加载大量的内容，或者网络速度较慢，那么用户在等待页面加载的同时就会感到极为不耐烦。这时我们就需要一个页面loading来提示用户正在加载中，提高用户体验和满意度。

loading的封装代码实现

第一步：添加代码

我们需要在html文档中添加一个loading标签。如下所示：

<div class="loading" style="display:none">
  <img src="loading.gif" alt="loading...">
</div>

需要注意的是，在loading的标签上我们将它的CSS属性里的display属性设置成了none，这是为了让它在一开始不显示。

第二步：编写CSS样式

我们需要为loading标签编写CSS样式，用来定义loading的显示效果。在这里，我们可以使用居中和透明的背景来表明正在加载。下面是CSS样式的代码：

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000;
}

.loading:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width:120%;
  height:120%;
  background-color: rgba(0, 0, 0, 0.6);
}

.loading img {
  display: block;
  margin: 0 auto;
}

第三步：添加JavaScript代码

接下来我们需要为这个loading实现在页面加载的时候自动显示，加载完毕之后自动隐藏。这个功能可以通过JavaScript代码来实现。

window.onload = function () {
  document.querySelector('.loading').style.display = 'none';
};

document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    document.querySelector('.loading').style.display = 'block';
  }
}

这段代码的作用是：在页面加载完成后，将loading的display属性设置为none，隐藏loading；在页面加载过程中，将loading的display属性设置为block，显示loading。

示例说明

示例一

我们使用以上代码实现一下页面加载时的loading效果。效果如下：

点击查看示例

示例二

我们在loading标签里面添加一些文字，来让用户更好的了解当前页面正在加载的内容。代码如下：

<div class="loading" style="display:none">
  <p>Loading...</p>
  <img src="loading.gif" alt="loading...">
</div>

同样使用以上代码实现页面加载时的loading效果。效果如下：