小编典典

如何通过JavaScript加载图像时显示微调框

javascript

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

我要做的是单击页面上的链接后,页面上的图表才更改。由于页面大约100kb大,这将极大地加快处理速度,并且真的不想为了显示此页面而重新加载整个页面。

我一直在通过JavaScript执行此操作,到目前为止,该JavaScript可以使用以下代码运行

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

问题在于,当用户单击链接时,图表更改可能需要花费几秒钟的时间。这使用户认为他们的点击没有执行任何操作,或者系统响应缓慢。

我要发生的是显示一个微调器/抖动器/状态指示器,以代替图像加载时的位置,因此,当用户单击链接时,他们至少知道系统已接受输入并正在对其进行操作。

我尝试了一些建议,甚至使用psudo超时来显示微调框,然后再飞回图像。

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

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

除了微调器明显小于显示的图表之外,这将是理想的选择。

还有其他想法吗?


阅读 210

收藏
2020-05-01

共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(){};
    }
  }
}
2020-05-01