JS实用技巧实现loading加载示例详解

介绍

在Web开发中，加载速度是一个很重要的问题，如果页面加载时间过长，会影响用户体验。为了优化用户体验，我们可以使用一个loading加载提示，告诉用户正在加载中，这是一个很好的交互方式。本篇文章将介绍如何使用一些JS实用技巧实现loading加载示例。

实现方式

1. 使用CSS动画实现

使用CSS动画可以实现比较简单的loading效果，其实现方式如下：

<div class="loader"></div>

.loader {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

点击查看演示效果

通过这种方式可以利用CSS的动画特性快速实现一个loading效果。

2. 使用JS动态生成loading元素

动态生成loading元素是另一种实现loading效果的方式，其实现方式如下：

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

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 9999;
}

#loader::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  border: 5px solid #000;
  border-top-color: #fff;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

function showLoader() {
  var loader = document.createElement('div');
  loader.setAttribute('id', 'loader');
  document.body.appendChild(loader);
}

function hideLoader() {
  var loader = document.getElementById('loader');
  loader.parentNode.removeChild(loader);
}

点击查看演示效果

通过动态生成loading元素，可以方便地控制loading元素的显示和隐藏，从而方便地实现loading效果。

结论

上面两种实现方式都可以达到较好的loading效果，根据实际需求选择使用即可。同时，在实际使用中，也可以根据实际需求对代码进行修改和优化。