如何通过JavaScript加载图像时显示微调框
我目前正在使用一个Web应用程序，该应用程序的页面显示一个图表(.png图像)。在页面的另一部分上，有一组链接，单击这些链接后，整个页面将重新加载，并且外观与之前完全相同，除了页面中间的图表。
我想做的是单击页面上的链接后，只是页面上的图表被更改。由于页面大约100kb大，这将极大地加快处理速度，并且真的不想为了显示此页面而重新加载整个页面。
我一直在通过JavaScript进行此操作，到目前为止，该JavaScript可以使用以下代码进行操作
document.getElementById('chart').src = '/charts/10.png';
问题是，当用户单击链接时，图表更改可能需要几秒钟的时间。这使用户认为他们的点击没有做任何事情，或者系统响应缓慢。
我想要发生的是显示一个微调器/抖动器/状态指示器，以代替图像加载时的位置，因此，当用户单击链接时，他们至少知道系统已经接受了输入并正在对其进行操作。
我尝试了一些建议，甚至使用psudo超时来显示微调框，然后再飞回图像。
我收到的一个很好的建议是使用以下内容
<img src="/charts/10.png" lowsrc="/spinner.gif"/>
除了微调器明显小于正在显示的图表之外，这将是理想的选择。
还有其他想法吗？
解决方案
回答
将微调器放到与图表相同大小的div中，我们知道高度和宽度，因此可以使用相对定位将其正确居中。
回答
使用setTimeout()函数的功能(更多信息)，这使我们可以设置计时器以在将来触发函数调用，并且调用它不会阻止当前/其他函数的执行(异步)。
将包含微调框的div放置在图表图像上方，并将其css display属性设置为none：
<div> <img src="spinner.gif" id="spinnerImg" style="display: none;" /></div>
隐藏微调器时，nbsp阻止div崩溃。没有它，当我们切换微调器的显示时，布局将"抽动"
function chartOnClick() {
//How long to show the spinner for in ms (eg 3 seconds)
var spinnerShowTime = 3000
//Show the spinner
document.getElementById('spinnerImg').style.display = "";
//Change the chart src
document.getElementById('chart').src = '/charts/10.png';
//Set the timeout on the spinner
setTimeout("hideSpinner()", spinnerShowTime);
}
function hideSpinner() {
document.getElementById('spinnerImg').style.display = "none";
}
回答
@iAn的解决方案对我来说很好。我唯一要更改的是不使用setTimeout，而是尝试挂接到图像的" Load"事件。这样，如果图片下载时间超过3秒，我们仍然可以使用微调器。
另一方面，如果下载时间较少，则可以在不到3秒的时间内获得微调器。
回答
我已经使用过类似的方法来预加载图像，然后在图像加载完成后自动调用我的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(){};
}
}
}
回答
我们可以显示一个静态图像，像这样给人一个棘轮的视觉错觉。
回答
除了lowsrc选项，我还在img的容器上使用了一个background-image。
回答
使用CSS将加载动画设置为图像容器的居中背景图像。
然后，在加载新的大图像时，首先将src设置为预加载的透明1像素gif。
例如
document.getElementById('mainimg').src = '/images/1pix.gif';
document.getElementById('mainimg').src = '/images/large_image.jpg';
加载large_image.jpg时，背景将通过1pix透明gif显示。
回答
我会添加一些随机数字以避免浏览器缓存。
回答
基于Ed的答案，我希望看到类似以下内容的内容：
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语句即可检查图像是否在我们设置事件的位置完成加载，因为它们是事先设置的，因此无论触发多快，它们都会触发图像加载。
回答
请注意，如果图像src不存在(HTTP 404错误)，则也会调用回调函数。为避免这种情况，我们可以检查图像的宽度，例如：
if(this.width == 0) return false;
