如何通过JavaScript加载图像时显示微调器 [英] How to show a spinner while loading an image via JavaScript

问题描述

我目前正在开发一个Web应用程序，它有一个显示单个图表（.png图像）的页面。在本页的另一部分，有一组链接，点击后，整个页面重新加载，看起来与之前完全相同，除了页面中间的图表。

I'm currently working on a web application which has a page which displays a single chart (a .png image). On another part of this page there are a set of links which, when clicked, the entire page reloads and looks exactly the same as before except for the chart in the middle of the page.

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

What I want to do is when a link is clicked on a page just the chart on the page is changed. This will speed things up tremendously as the page is roughly 100kb large, and don't really want to reload the entire page just to display this.

我一直在通过JavaScript进行此操作，到目前为止，使用以下代码

I've been doing this via JavaScript, which works so far, using the following code

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

问题在于，当用户点击链接时，可能需要几秒钟的时间图表变化。这使得用户认为他们的点击没有做任何事情，或者系统响应缓慢。

The problem is that when the user clicks on the link, it may take a couple of seconds before the chart changes. This makes the user think that their click hasn't done anything, or that the system is slow to respond.

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

What I want to happen is display a spinner / throbber / status indicator, in place of where the image is while it is loading, so when the user clicks the link they know at least the system has taken their input and is doing something about it.

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

I've tried a few suggestions, even using a psudo time out to show a spinner, and then flick back to the image.

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

A good suggestion I've had is to use the following

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

这是理想的，除了微调器显着小于正在显示的图表。

Which would be ideal, except the spinner is significantly smaller than the chart which is being displayed.

还有其他想法吗？

推荐答案

我用过这样的东西来预加载图像，然后在图像加载完成后自动回调我的javascript。您希望在设置回调之前检查完成，因为图像可能已经被缓存，并且可能无法调用您的回调。

I've used something like this to preload an image and then automatically call back to my javascript when the image is finished loading. You want to check complete before you setup the callback because the image may already be cached and it may not call your 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(){};
    }
  }
}

这篇关于如何通过JavaScript加载图像时显示微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！