AJAX请求成功回调先于图片加载完成，如何让AJAX等待图片全部加载？

看起来你遇到的核心问题是：AJAX请求拿到HTML后立刻插入DOM，但浏览器还没完成所有图片的加载，所以你看到的是未加载完成的占位图标。AJAX本身只负责获取HTML内容，不会等待图片资源加载——那部分是浏览器后续的异步操作。不过我们可以通过监听图片的加载状态来解决这个视觉问题，确保所有图片加载完成后再显示内容。

这里有个实用的解决方案，修改你的AJAX成功回调，让它等待所有图片加载（或处理加载失败）后再显示容器：

$.ajax({
  type: "POST",
  url: "ajax.php",
  data: {
    "type": "compareAssessmentsPies",
    "yearGroup": yearGroup,
    "subject": subject
  },
  success: function(response) {
    const $replyContainer = $("#reply");
    // 先插入HTML但隐藏容器，避免用户看到加载中的占位图
    $replyContainer.html(response).hide();
    
    const $images = $replyContainer.find("img");
    const totalImages = $images.length;
    let loadedImagesCount = 0;

    // 没有图片的情况直接显示
    if (totalImages === 0) {
      $replyContainer.show();
      return;
    }

    // 监听每张图片的加载完成/失败事件
    $images.on("load error", function(event) {
      loadedImagesCount++;

      // 处理加载失败的图片（可选）
      if (event.type === "error") {
        console.warn(`图片加载失败: ${this.src}`);
        // 可以替换为自定义占位图
        $(this).attr("src", "/path/to/your/placeholder.png");
      }

      // 所有图片都处理完毕后显示容器
      if (loadedImagesCount === totalImages) {
        $replyContainer.show();
        console.log("所有图片已加载完成");
      }
    });

    // 处理已经缓存的图片（这类图片不会触发load事件）
    $images.each(function() {
      if (this.complete) {
        $(this).trigger("load");
      }
    });
  }
});

额外排查点 #

除了上面的代码，你还可以检查这几个可能的原因：

• 浏览器并发限制：主流浏览器对同一域名的并发请求数有限制（一般是6个），60张图片会分批加载，首次加载时可能还在排队。上面的代码会等所有图片加载完再显示，避免用户看到不全的网格。
• 图片尺寸属性：确保所有<img>标签都设置了width和height属性，浏览器可以提前预留空间，避免布局跳动导致的视觉错乱（看起来像图片没加载）。
• 图片路径正确性：虽然右键能打开图片，但确认一下AJAX返回的HTML中，图片的src是绝对路径还是相对路径——如果是相对路径，要确保它相对于当前页面的路径是正确的（而非ajax.php的路径）。

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