javascript - 如何在通过 JavaScript 加载图像时显示微调器

Question

我目前正在开发一个 Web 应用程序，该应用程序有一个显示单个图表(.png 图像)的页面。在此页面的另一部分有一组链接，单击这些链接时，整个页面将重新加载，并且除了页面中间的图表之外，看起来与以前完全相同。

我想要做的是，当单击页面上的链接时，页面上的图表就会发生变化。这将极大地加快速度，因为页面大约有 100kb 大，并且不想仅仅为了显示它而重新加载整个页面。

我一直通过 JavaScript 来完成此操作，到目前为止，它可以使用以下代码

document.getElementById('chart').src = '/charts/10.png';

问题是，当用户单击链接时，图表可能需要几秒钟的时间才会发生变化。这会让用户认为他们的点击没有执行任何操作，或者系统响应缓慢。

我想要发生的是显示一个旋转器/颤动器/状态指示器，代替图像加载时的位置，因此当用户单击链接时，他们至少知道系统已接受他们的输入并正在执行操作关于它的一些事情。

我尝试了一些建议，甚至使用伪超时来显示旋转器，然后弹回到图像。

我得到的一个很好的建议是使用以下内容

<img src="/charts/10.png" lowsrc="/spinner.gif"/>

这将是理想的，除了旋转器比正在显示的图表小得多。

还有其他想法吗？

Answer 1

我使用类似的方法来预加载图像，然后在图像加载完成时自动回调我的 JavaScript。您需要在设置回调之前检查完成情况，因为图像可能已被缓存，并且它可能不会调用您的回调。

function PreloadImage(imgSrc, callback){
  var objImagePreloader = new Image();

  objImagePreloader.src = imgSrc;
  if(objImagePreloader.complete){
    callback();
    objImagePreloader.onload=function(){};
  }
  else{
    objImagePreloader.onload = function() {
      callback();
      //    clear onLoad, IE behaves irratically with animated gifs otherwise
      objImagePreloader.onload=function(){};
    }
  }
}