如何在通过JavaScript加载图像时显示微调器
我目前正在开发一个web应用程序，它有一个显示单个图表( .png图像)的页面。在此页面的另一部分有一组链接，当单击这些链接时，整个页面将重新加载，外观与以前完全相同，但页面中间的图表除外。
我想要做的是，当页面上的链接被点击时，页面上的图表就会改变。这将极大地提高速度，因为页面大约有100kb大小，并且不想仅仅为了显示这个页面而重新加载整个页面。
到目前为止，我已经通过JavaScript完成了这项工作，使用了以下代码
document.getElementById('chart').src = '/charts/10.png';问题是，当用户单击链接时，图表可能需要几秒钟的时间才会更改。这使得用户认为他们的点击没有做任何事情，或者系统响应很慢。
我想要的是显示一个旋转器/节拍/状态指示器，而不是图像加载时所在的位置，这样当用户单击链接时，他们至少知道系统已经接受了他们的输入并对其执行了一些操作。
我尝试了一些建议，甚至使用psudo超时来显示旋转控件，然后弹回图像。
我得到的一个很好的建议是使用以下代码
<img src="/charts/10.png" lowsrc="/spinner.gif"/>这将是理想的，除非微调控件比正在显示的图表小得多。
还有其他想法吗？
回答 10
Stack Overflow用户
发布于 2008-09-09 18:51:32
我已经使用类似这样的东西来预加载图像，然后在图像加载完成后自动回调到我的javascript。在设置回调之前，您需要选中complete，因为镜像可能已经被缓存，并且可能不会调用您的回调。
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(){};
}
}
}Stack Overflow用户
发布于 2008-09-09 18:54:33
您可以显示提供optical illusion of a spinny-wheel, like these的静态图像。
Stack Overflow用户
发布于 2010-05-25 14:32:57
根据埃德的答案，我更希望看到这样的情况：
function PreLoadImage( srcURL, callback, errorCallback ) {
var thePic = new Image();
thePic.onload = function() {
callback();
thePic.onload = function(){};
}
thePic.onerror = function() {
errorCallback();
}
thePic.src = srcURL;
}您的回调可以在适当的位置显示图像并处理/隐藏微调控件，并且errorCallback可以防止您的页面“搁浅”。所有事件驱动，没有计时器或轮询，而且你不必添加额外的if语句来检查图像在设置事件时是否完成加载-因为它们是预先设置的，无论图像加载有多快，它们都会触发。
https://stackoverflow.com/questions/51352
复制相似问题