如何在通过 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.

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

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.

我尝试了一些建议，甚至使用伪超时来显示微调器，然后轻弹回图像.

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屋！