基于jquery的loading 加载提示效果实现代码

下面我会详细讲解“基于jquery的loading 加载提示效果实现代码”的完整攻略。

1. 确定需求和实现方式

首先我们需要明确需求和实现方式。这里我们需要实现一个加载提示效果，即在用户进行某些操作时显示一个提示框，让用户知道当前页面正在加载数据。我们可以通过使用jquery来实现这个功能。

2. 编写HTML代码

加载提示效果需要在页面中插入HTML代码来实现。我们可以在页面中插入以下代码：

<div id="loading">
  <div class="spinner"></div>
  <div class="loading-text">Loading</div>
</div>

这里我们定义了一个id为“loading”的div，里面包含了两个子元素，一个是class为“spinner”的div，用来实现加载图标的旋转效果；另一个是class为“loading-text”的div，用来显示“Loading”文字。

3. 编写CSS样式

接下来我们需要编写CSS样式来美化加载提示效果。我们可以在CSS文件中添加以下代码：

#loading {
  position: fixed;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
}

.spinner {
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-top-color: #3498db;
  animation: spin 1s infinite linear;
}

.loading-text {
  margin-top: 10px;
  font-size: 20px;
  color: #fff;
  text-align: center;
}

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

这里我们定义了id为“loading”的div样式，设置了其为固定定位，覆盖整个页面的大小，并设置半透明的背景色。同时为class为“spinner”的div设置了样式，实现了加载图标的旋转效果，并设置了边框和颜色；为class为“loading-text”的div设置了样式，设置了颜色和字体大小；最后通过@keyframes实现了spin动画效果。

4. 编写JavaScript代码

最后我们需要使用jQuery编写JavaScript代码来实现显示和隐藏加载提示效果。我们可以在JavaScript文件中添加以下代码：

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

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

这里我们定义了两个函数showLoading和hideLoading，分别用来显示和隐藏加载提示效果。这两个函数通过jQuery选择器来获取id为“loading”的div，并调用show和hide方法来显示和隐藏加载提示效果。

5. 示例说明

下面分别通过两个示例说明如何使用上述代码实现加载提示效果。

示例1

在点击一个按钮时，显示加载提示效果，并通过ajax请求加载数据。页面代码如下：

<button id="load-btn">Load Data</button>

JavaScript代码如下：

$(function () {
  $("#load-btn").click(function () {
    showLoading();
    $.ajax({
      url: "/data",
      success: function (data) {
        // ...
        hideLoading();
      },
      error: function () {
        // ...
        hideLoading();
      }
    });
  });
});

这里我们在按钮的点击事件中，先调用showLoading函数显示加载提示效果，然后发起ajax请求加载数据。在请求完成后，不论成功或失败都会调用hideLoading函数隐藏加载提示效果。

示例2

在表单提交时，显示加载提示效果，并提交表单数据。页面代码如下：

<form id="my-form">
  <!-- 表单元素... -->
  <button type="submit">Submit</button>
</form>

JavaScript代码如下：

$(function () {
  $("#my-form").submit(function (event) {
    event.preventDefault();
    showLoading();
    var formData = $(this).serialize();
    $.post("/submit", formData, function (data) {
      // ...
      hideLoading();
    });
  });
});

这里我们在表单的提交事件中，先通过event.preventDefault()方法来阻止表单默认提交行为。然后调用showLoading函数显示加载提示效果，获取表单数据并提交到服务器，最后在请求完成后调用hideLoading函数隐藏加载提示效果。

以上就是基于jQuery实现loading加载提示效果的完整攻略。