javascript - 阻止图像在 AJAX 获取请求上闪烁

Question

我有以下功能，它们每 10 秒刷新一次页面并从数据库中获取一些数据，并将其放置在一些 div 中。问题是，如果有图像，它们会在区域刷新时每 10 秒闪烁一次。

有什么方法可以防止这种图像闪烁吗？也许某种形式的缓存或预加载？

这些图像托管在 S3 上，我在项目中使用 PHP。

提前致谢！

function refreshAll() {
  var doneCount = 0;
  var onDone = function() {
    doneCount++;

    if (doneCount == 2)
      setTimeout(refreshAll, 10000);
        console.log("fetching new updates....");
  }

  loadLeaderboard(onDone);
  loadActivity(onDone);
 }

refreshAll();

function loadLeaderboard(onDone) {
   var competitionId = $("body").attr("data-competitionId");
   var url = "leaderboard_api.php?competitionId=" + competitionId;

   $.get(url, function(data) {
     $("#leaderboard-spot").html(data);

      if (onDone)
        onDone();

   });
 }

function loadActivity(onDone) {
  var competitionId = $("body").attr("data-competitionId");
  var url = "activity_api.php?competitionId=" + competitionId;

   $.get(url, function(data) {
     $("#activityspot").html(data);
        if (onDone)
        onDone();
   });
 }