原生JS实现LOADING效果

2023年6月11日上午4:50 • JavaScript

原生JS实现LOADING效果的攻略包括以下步骤：

1.准备DOM结构和CSS样式

首先要在HTML中添加一个包含一个loader的div元素，用于显示LOADING效果。如下所示：

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

然后我们需要为这个loader div元素设置样式。样式可以按照自己的需要进行修改，下面是一个示例样式的CSS代码：

#loader {
   margin: 0 auto;
   border: 8px solid #f3f3f3;
   border-top: 8px solid #3498db;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   animation: spin 2s linear infinite;
}

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

这里的样式代码用于绘制一个带有动画的圆形LOADING效果。其实现细节可以参考CSS3动画教程。

2.实现JavaScript代码

接下来我们需要编写JavaScript代码来控制LOADING效果。在这里我们需要实现两个函数，分别用于显示和隐藏LOADING效果。这里是示例代码：

function showLoading() {
    document.getElementById("loader").style.display = "block";
}

function hideLoading() {
    document.getElementById("loader").style.display = "none";
}

在这里，showLoading()函数用于显示LOADING效果，hideLoading()函数用于隐藏LOADING效果。这两个函数分别通过改变CSS样式实现。

3.使用代码

最后，我们可以在页面加载时立即显示LOADING效果，等到页面完全加载并渲染好后再隐藏LOADING效果。这里是示例代码：

document.onreadystatechange = function () {
    if (document.readyState == "complete") {
        hideLoading();
    }
}

showLoading();

在这里，我们使用了document对象的onreadystatechange事件来处理页面加载完成事件。当文档状态变为完全加载状态时，我们调用hideLoading()函数隐藏LOADING效果。在代码开始时，我们使用showLoading()函数来立即显示LOADING效果。

示例1：模拟异步请求过程

function simulateRequest() {
  showLoading(); // 先显示LOADING效果
  setTimeout(function() {
    hideLoading(); // 2秒后隐藏LOADING效果
  }, 2000);
}

这里我们模拟一个2秒内完成的异步请求，使用setTimeout函数来实现异步。在实际应用中，可以用这种方式来给用户提供反馈，告诉用户应用正在处理请求并且需要时间等待。

示例2：加载图片时显示LOADING效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Loading示例</title>
  <style>
    #loader {
      /* 样式代码 */
    }
  </style>
</head>
<body>
  <div id="loader"></div>
  <img src="./图片地址" onload="hideLoading()">
</body>
<script>
  function showLoading() {
    document.getElementById("loader").style.display = "block";
  }

  function hideLoading() {
    document.getElementById("loader").style.display = "none";
  }

  showLoading();
</script>
</html>

在这个示例中，我们在页面上添加了一个图片元素，并在页面加载时立即显示LOADING效果。在图片加载完成后，我们使用onload事件触发hideLoading()函数来隐藏LOADING效果。这种方法适用于加载图片较多的情况，可以提供良好的用户体验。

以上就是实现“原生JS实现LOADING效果”的完整攻略了。通过这些步骤，我们可以轻松地在自己的网站中增加LOADING效果，提高用户体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生JS实现LOADING效果 - Python技术站