如何通过JavaScript加载图片时显示微调
我目前正在一个Web应用程序，它有一个页面显示一个图表（一个.png图像）。 在这个页面的另一部分，有一组链接，点击后，整个页面重新加载，看起来和以前完全一样，除了页面中间的图表。
我想要做的是当一个页面上的链接被点击时，只是页面上的图表发生了变化。 这会大大加快速度，因为页面大小约为100kb，并且不想重新加载整个页面来显示它。
我一直在通过使用以下代码的JavaScript来完成这项工作
document.getElementById('chart').src = '/charts/10.png'; 问题是，当用户点击链接时，图表更改可能需要几秒钟的时间。 这使得用户认为他们的点击没有做任何事情，或者系统响应缓慢。
我想要发生的是显示一个微调/悸动/状态指示器，代替图像在加载时的位置，所以当用户点击链接时，他们知道至less系统已经采取了他们的input并正在做一些事情。
我已经尝试了一些build议，甚至使用psudo超时显示微调，然后轻弹回图像。
我有一个很好的build议是使用以下
<img src="/charts/10.png" lowsrc="/spinner.gif"/>
这将是理想的，除了微调显着小于正在显示的图表。
任何其他的想法？
我已经使用这样的预先载入图像，然后自动callback到我的JavaScript时，图像加载完成。 在设置callback之前，您要检查完成，因为图像可能已被caching，并且可能不会调用callback。
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(){}; } } }
你可以显示一个静态的图像，给出像这样的旋转轮的错觉 。
使用setTimeout（）函数的强大function（ 更多信息 ） – 这允许你设置一个定时器来触发将来的函数调用，调用它不会阻止当前/其他函数（asynchronous）的执行。
在图表图像上方放置一个包含微调器的div，将其css显示属性设置为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"; }
使用jQuery的load（）方法，一旦加载图像，就可以轻松地做一些事情：
$('img.example').load(function() { $('#spinner').fadeOut(); });
请参阅： http : //api.jquery.com/load-event/
使用CSS将加载animation设置为图像容器的居中背景图像。
然后在加载新的大图像时，首先将src设置为预加载的透明1像素gif。
例如
document.getElementById（'mainimg'）。src ='http://img.dovov.com1pix.gif'; document.getElementById（'mainimg'）。src ='http://img.dovov.comlarge_image.jpg';
在加载large_image.jpg的同时，背景将通过1pix透明gif显示。
基于埃德的回答，我宁愿看到类似于：
function PreLoadImage( srcURL, callback, errorCallback ) { var thePic = new Image(); thePic.onload = function() { callback(); thePic.onload = function(){}; } thePic.onerror = function() { errorCallback(); } thePic.src = srcURL; }
您的callback可以在适当的位置显示图像并处理/隐藏微调，并且errorCallback可以防止您的页面“沙滩球”。 所有的事件驱动，没有计时器或轮询，再加上你不必添加额外的if语句来检查图像是否完成加载，而你设置你的事件 – 因为它们事先设置，他们将触发，无论如何快速的图像加载。
我喜欢@ duddle的jquery方法，但是发现load（）并不总是被调用的（比如从IE中的caching中获取图片的时候）。 我使用这个版本：
$('img.example').one('load', function() { $('#spinner').remove(); }).each(function() { if(this.complete) { $(this).trigger('load'); } });
这最多一次调用负载，如果已经完成加载，则立即调用负载。
前段时间我写了一个jQuery插件，它自动处理显示一个微调器http://denysonique.github.com/imgPreload/
查看它的源代码可以帮助你检测什么时候显示微调，并显示在加载的图像的中心。
将微调器放在与图表大小相同的div中，您就知道高度和宽度，因此您可以使用相对定位来正确居中。
除了lowsrc选项外，我还在img的容器上使用了background-image 。
请注意，如果图像src不存在（http 404错误），也会调用callback函数。 为了避免这种情况，你可以检查图像的宽度，如：
if(this.width == 0) return false;
@ iAn的解决scheme对我来说很好。 我唯一改变的不是使用setTimeout，而是尝试钩入图像“加载”事件。 这样，如果图像需要超过3秒的下载，你仍然会得到微调。
另一方面，如果下载需要的时间更less，你会得到微调less于3秒。
我会添加一些随机数字，以避免浏览器caching。
