jquery loading-CFANZ编程社区

实现JQuery Loading 效果

介绍

在 Web 开发中，经常需要在页面加载或者进行异步操作时显示一个加载提示，以提醒用户正在进行相关操作。JQuery 是一个非常流行的 JavaScript 库，它提供了一系列简洁、快速和功能强大的 API，可以轻松实现各种效果，包括加载提示效果。本文将教会你如何使用 JQuery 实现一个简单的加载效果。

流程

下面是实现 "JQuery Loading" 效果的步骤：

步骤	代码示例	描述
1.	<div id="loading"></div>	在 HTML 中添加一个用于显示加载效果的容器元素
2.	$("#loading").hide();	初始时隐藏加载效果
3.	$(document).ajaxStart(function(){<br> $("#loading").show();<br>});	当页面发起 Ajax 请求时显示加载效果
4.	$(document).ajaxStop(function(){<br> $("#loading").hide();<br>});	当页面所有 Ajax 请求完成时隐藏加载效果

代码说明

步骤 1

在 HTML 中添加一个用于显示加载效果的容器元素。这个容器可以是一个 div 元素，我们给它一个唯一的 id 属性（如 "loading"），以便通过 JQuery 选择器进行操作。

<div id="loading"></div>

步骤 2

初始时，隐藏加载效果。我们可以使用 JQuery 的 hide() 方法来实现。

$("#loading").hide();

步骤 3

当页面发起 Ajax 请求时，显示加载效果。我们可以使用 ajaxStart() 方法来监听页面中的 Ajax 请求，并在请求开始时显示加载效果。

$(document).ajaxStart(function() {
  $("#loading").show();
});

步骤 4

当页面中的所有 Ajax 请求完成时，隐藏加载效果。我们可以使用 ajaxStop() 方法来监听所有 Ajax 请求的完成事件，并在完成时隐藏加载效果。

$(document).ajaxStop(function() {
  $("#loading").hide();
});

示例

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src="
  <style>
    #loading {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="loading"></div>
  <button id="ajaxButton">发起 Ajax 请求</button>

  <script>
    $("#loading").hide();

    $(document).ajaxStart(function() {
      $("#loading").show();
    });

    $(document).ajaxStop(function() {
      $("#loading").hide();
    });

    $("#ajaxButton").click(function() {
      $.ajax({
        url: "
        success: function(response) {
          console.log(response);
        }
      });
    });
  </script>
</body>
</html>

上述代码中，我们首先将加载效果的容器隐藏起来，并通过 ajaxStart() 和 ajaxStop() 方法监听 Ajax 请求的开始和完成事件，在事件回调函数中显示和隐藏加载效果。当点击 "发起 Ajax 请求" 按钮时，将发起一个模拟的 Ajax 请求，并在控制台输出返回的数据。在实际项目中，你需要将 url 替换为你的实际接口地址。

通过以上步骤，你可以轻松地使用 JQuery 实现一个简单的加载效果，以提高用户体验。希望本文对你有所帮助！