如何通过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>&nbsp;<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"; } 

使用jQueryload()方法,一旦加载图像,就可以轻松地做一些事情:

 $('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。