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

Question

我目前正在使用一个Web应用程序，该应用程序的页面显示一个图表（.png图像）。在此页面的另一部分上，有一组链接，单击这些链接可以重新加载整个页面，除了页面中间的图表外，其他外观与以前完全相同。

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

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

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

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

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

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

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

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

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

还有其他想法吗？

Answer 1

我已经使用过类似的方法来预加载图像，然后在图像加载完成后自动调用我的JavaScript。您想在设置回调之前检查完成情况，因为该图像可能已被缓存，并且可能不会调用您的回调。function PreloadImage(imgSrc, callback){&nbsp; var objImagePreloader = new Image();&nbsp; objImagePreloader.src = imgSrc;&nbsp; if(objImagePreloader.complete){&nbsp; &nbsp; callback();&nbsp; &nbsp; objImagePreloader.onload=function(){};&nbsp; }&nbsp; else{&nbsp; &nbsp; objImagePreloader.onload = function() {&nbsp; &nbsp; &nbsp; callback();&nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; clear onLoad, IE behaves irratically with animated gifs otherwise&nbsp; &nbsp; &nbsp; objImagePreloader.onload=function(){};&nbsp; &nbsp; }&nbsp; }}