JS实现的自定义显示加载等待图片插件(loading.gif)

一、背景和需求

随着 Web 应用越来越复杂和重量级，页面加载速度和性能对用户体验影响越来越大。而在加载大量数据或长列表等场景下，用户往往需要等待一段时间才能看到页面内容。此时，一种好的解决方案是通过显示一个加载等待图片，告诉用户页面正在加载中，避免页面一片空白或者没有响应的死板状态，给用户带来更好的交互体验。

为了简化网页开发中的等待界面实现，我们可以使用 JS 实现的自定义显示加载等待图片插件(loading.gif)。该插件可以快速实现加载中和加载完成两种状态，实现方式灵活可扩展，适用于各种场景。

二、总体思路和实现步骤

插件的实现主要通过一些 DOM 操作来动态地创建、显示、隐藏和删除等待图片，并通过 JS 控制其显隐状态，达到良好的用户交互效果。

详细实现步骤如下：

1. 创建等待图片 DOM 结构：使用 HTML 等方式创建一个包含在一个 div 容器中的 img 元素，并为其设置 loading.gif 图片路径和一些样式属性等。代码示例 如下：

<div id="loading" style="display: none;">
  <img src="loading.gif" alt="Loading" style="display: block; margin: auto;">
</div>

1. 实现函数控制图片显示和隐藏：使用 JS 中的 DOM 操作方法来实现 loading 等待图片的控制，包括显示、隐藏、删除等操作。代码示例如下：

// 显示 loading 图片
function showLoading() {
  document.getElementById("loading").style.display = "block";
}

// 隐藏 loading 图片
function hideLoading() {
  document.getElementById("loading").style.display = "none";
}

// 删除 loading 图片
function removeLoading() {
  var elem = document.getElementById("loading");
  if (elem) {
    elem.parentNode.removeChild(elem);
  }
}

1. 调用函数实现加载等待图片的显示和隐藏：在需要显示等待状态的函数中调用 showLoading() 函数，完成任务后调用 hideLoading() 函数完成等待状态的结束。代码示例如下：

// 在异步请求时显示 loading 图片，并完成任务后自动隐藏
function asyncRequest(url, params, successCallback, failureCallback) {
  showLoading();
  $.ajax({
    url: url,
    type: 'post',
    data: params,
    success: function (response) {
      successCallback(response);
    },
    error: function (xhr, status, error) {
      failureCallback(xhr, status, error);
    },
    complete: function () {
      hideLoading();
    }
  });
}

三、插件使用示例

1. 基本使用：以实现异步请求时显示等待图片为例，代码示例如下：

// 在异步请求时显示 loading 图片，并完成任务后自动隐藏
function asyncRequest(url, params, successCallback, failureCallback) {
  showLoading();
  $.ajax({
    url: url,
    type: 'post',
    data: params,
    success: function (response) {
      successCallback(response);
    },
    error: function (xhr, status, error) {
      failureCallback(xhr, status, error);
    },
    complete: function () {
      hideLoading();
    }
  });
}

1. 带参数扩展使用：可以通过传递不同的参数来改变 loading 等待图片的大小、图片源等，以实现更灵活的应用效果。代码示例如下：

// 自定义 loading 等待图片的配置参数
function showLoading(text, imgUrl, width, height) {
  var loadingElem = document.getElementById("loading");
  if (loadingElem) {
    loadingElem.parentNode.removeChild(loadingElem);
  }

  // 创建 loading 等待图片 DOM
  var loadingDiv = document.createElement("div");
  var loadingImg = document.createElement("img");
  loadingImg.setAttribute("src", imgUrl);
  loadingImg.setAttribute("alt", "Loading");
  loadingImg.style.width = width + "px";
  loadingImg.style.height = height + "px";
  loadingImg.style.display = "block";
  loadingImg.style.margin = "auto";
  loadingDiv.setAttribute("id", "loading");
  loadingDiv.style.display = "none";
  loadingDiv.appendChild(loadingImg);

  // 创建加载文字 DOM
  var loadingText = document.createElement("p");
  loadingText.innerText = text;
  loadingText.style.textAlign = "center";
  loadingDiv.appendChild(loadingText);

  document.body.appendChild(loadingDiv);
  document.getElementById("loading").style.display = "block";
}

四、总结

通过本文介绍的 JS 实现的自定义显示加载等待图片插件(loading.gif)，可以有效地解决 Web 应用中的等待界面实现问题，提升用户的交互体验。熟悉了插件的实现原理和使用方法之后，我们可以灵活地应用在各种 Web 应用项目中，实现更好的用户体验和业务需求。