图片加载时显示GIF加载图标：现有脚本能否实现？

嘿，你的现有脚本目前还没实现加载GIF图标的功能，但只要稍微调整补充一下就能搞定啦！下面是具体的实现方案：

你的原代码仅完成了获取数据后设置图片src的逻辑，缺少加载状态的控制，我们需要添加几个关键步骤来实现需求：

1. 先准备加载GIF的DOM元素 #

在页面中添加一个加载图标容器（默认隐藏），可以用GIF图作为加载指示器：

<!-- 示例：居中显示的加载图标，可根据你的布局调整样式 -->
<div id="loading-spinner" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;">
  <img src="loading.gif" alt="加载中..." />
</div>

2. 修改脚本，添加加载状态控制 #

调整你的$.get请求逻辑，在请求发起时显示加载图标，然后在图片加载完成/失败、AJAX请求失败时隐藏图标：

// 发起请求前先显示加载图标
$('#loading-spinner').show();

$.get('http://192.168.1.69:8090/VirtualRadar/AirportDataThumbnails.json?icao=' + p.Icao + '&reg=' + p.Reg, function(res) {
  var error = res.status;
  if (error == "404") {
    // 设置占位图，并绑定加载完成/失败事件
    $("#image").attr('src', "placeholder.jpg")
      .on('load error', function() {
        $('#loading-spinner').hide();
      });
    $("#image2").attr('src', "placeholder.jpg")
      .on('load error', function() {
        $('#loading-spinner').hide();
      });
  } else {
    // 假设接口返回了图片地址，比如res.thumbnail1、res.thumbnail2
    $("#image").attr('src', res.thumbnail1)
      .on('load error', function() {
        $('#loading-spinner').hide();
      });
    $("#image2").attr('src', res.thumbnail2)
      .on('load error', function() {
        $('#loading-spinner').hide();
      });
  }
})
// 处理AJAX请求失败的情况，也要隐藏加载图标
.fail(function() {
  $('#loading-spinner').hide();
  // 请求失败时设置占位图
  $("#image").attr('src', "placeholder.jpg");
  $("#image2").attr('src', "placeholder.jpg");
});

关键细节说明 #

• 你提到的$('#image').load()写法，在新版本jQuery中更推荐用$(elem).on('load', fn)，同时必须监听error事件——如果图片加载失败（比如占位图也找不到），加载图标会一直显示，所以失败场景也得处理。
• 一定要在发起AJAX请求前就显示加载图标，不然如果AJAX请求本身耗时较长，用户会看不到加载状态。
• 如果需要等两张图片都加载完成再隐藏图标，可以用$.when()监听多个图片的加载完成事件：

// 示例：等待两张图片都加载完成/失败后隐藏图标
var img1Load = $("#image").attr('src', res.thumbnail1).promise();
var img2Load = $("#image2").attr('src', res.thumbnail2).promise();

$.when(img1Load, img2Load).always(function() {
  $('#loading-spinner').hide();
});

这样修改后，就能在图片加载过程中显示GIF加载图标，加载完成或失败时自动隐藏啦！

内容的提问来源于stack exchange，提问作者kdawg