jQuery 如何在JavaScript中加载图片时显示旋转图标

在本文中，我们将介绍如何使用jQuery在JavaScript中加载图片时显示旋转图标。

1.背景

在网页中，当加载大型图片或其他需要较长时间的资源时，用户可能会感到不耐烦。为了提高用户体验，我们可以在加载过程中显示一个旋转的图标，让用户知道页面仍在工作。

2.显示旋转图标的实现

在jQuery中，我们可以使用一些技术来实现在加载图片时显示旋转图标的效果。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Show Spinner While Loading an Image</title>
  <style>
    .spinner {
      border: 16px solid #f3f3f3; /* Light grey */
      border-top: 16px solid #3498db; /* Blue */
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
      margin: 0 auto;
      margin-top: 50px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="spinner"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    (document).ready(function(){(".spinner").show(); // 显示旋转图标

      var image = new Image();
      image.src = "path/to/image.jpg"; // 替换为要加载的图片路径

      (image).on("load", function(){(".spinner").hide(); // 隐藏旋转图标
        // 图片加载完成后的其他操作
      });
    });
  </script>
</body>
</html>

在上面的代码中，我们使用了一个简单的HTML结构和CSS样式来创建旋转的图标，然后使用jQuery来控制其显示和隐藏。代码中使用的样式和动画效果可以根据需要进行修改。

首先，我们在页面中添加一个<div>元素，其具有spinner类名。这个<div>元素将用于显示旋转的图标。接下来，我们使用jQuery的$(document).ready()函数来确保页面加载完成后再执行代码。

在代码中，我们使用$(".spinner").show();来显示旋转图标。然后，使用new Image()创建一个新的图像对象，并将要加载的图片路径赋值给其src属性。在图片加载完成后，我们使用$(image).on("load", function(){})来监听加载事件，并在回调函数中使用$(".spinner").hide();隐藏旋转图标。

3.示例

为了更好地理解上述代码的使用，我们将为您演示一个简单的示例。

假设我们有一个图片加载的按钮，当用户点击该按钮时，图片将开始加载，并显示旋转图标，加载完成后隐藏旋转图标。下面是示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Show Spinner While Loading an Image - Example</title>
  <style>
    .spinner {
      border: 16px solid #f3f3f3; /* Light grey */
      border-top: 16px solid #3498db; /* Blue */
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
      margin: 0 auto;
      margin-top: 50px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <button id="loadButton">Load Image</button>
  <div class="spinner" style="display: none;"></div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    (document).ready(function(){("#loadButton").click(function(){
        (".spinner").show(); // 显示旋转图标

        var image = new Image();
        image.src = "path/to/image.jpg"; // 替换为要加载的图片路径(image).on("load", function(){
          $(".spinner").hide(); // 隐藏旋转图标
          // 图片加载完成后的其他操作
        });
      });
    });
  </script>
</body>
</html>