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

Question

我目前正在开发一个Web应用程序,它有一个显示单个图表的页面(.png图像).在此页面的另一部分,有一组链接,当单击时,整个页面重新加载并看起来与之前完全相同,除了页面中间的图表.

我想要做的是当在页面上单击链接时,只更改页面上的图表.这将大大加快速度,因为页面大约100kb大,并且真的不想重新加载整个页面只是为了显示它.

我一直在通过JavaScript工作,到目前为止,使用以下代码

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

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

我想要发生的是显示一个微调/ throbber /状态指示器,代替图像在加载时的位置,所以当用户点击链接时他们知道至少系统已经接受了他们的输入并正在做一些关于它的事情.

我已经尝试了一些建议,即使使用psudo超时来显示微调器,然后再回到图像.

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

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

哪个是理想的,除了微调器显着小于正在显示的图表.

还有其他想法吗？

Answer 1

我已经使用这样的东西来预加载图像,然后在图像加载完成后自动回调我的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(){};
    }
  }
}

Answer 2

你可以展示一个静态图像,给出像这样的旋转轮的视错觉.

Answer 3

使用jQuery的load()方法,可以在加载图像后立即执行某些操作:

$('img.example').load(function() {
  $('#spinner').fadeOut();
});

请参阅:http://api.jquery.com/load-event/

Answer 4

使用setTimeout()函数的强大功能(更多信息) - 这允许您设置一个定时器以在将来触发函数调用,并且调用它不会阻止当前/其他函数的执行(异步.).

将包含微调器的div放在图表图像上方,并将其css display属性设置为none:

<div>&nbsp;<img src="spinner.gif" id="spinnerImg" style="display: none;" /></div>

当隐藏微调器时,停止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";
}