56

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

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

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

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

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

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

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

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

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

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

还有其他想法吗？

4

13 回答 13

41

我已经使用这样的东西来预加载图像，然后在图像完成加载时自动回调我的 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(){};
    }
  }
}
于 2008-09-09T18:51:31.887 回答
19

您可以显示一个静态图像，该图像会产生旋转轮的视觉错觉，例如这些。

于 2008-09-09T18:54:32.787 回答
12

使用jQuery的load()方法，可以轻松地在加载图像后立即执行某些操作：

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

见：http ://api.jquery.com/load-event/

于 2011-05-13T15:28:09.990 回答
10

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

在图表图像上方放置一个包含微调器的 div，并将其 css 显示属性设置为无：

<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";
}
于 2008-09-09T08:00:13.903 回答
4

使用 CSS 将加载动画设置为图像容器的居中背景图像。

然后在加载新的大图时，首先将src设置为预加载的透明1像素gif。

例如

document.getElementById('mainimg').src = '/images/1pix.gif';
document.getElementById('mainimg').src = '/images/large_image.jpg';

加载 large_image.jpg 时，背景将通过 1pix 透明 gif 显示。

于 2009-09-22T13:05:18.313 回答
3

基于 Ed 的回答，我希望看到类似的内容：

function PreLoadImage( srcURL, callback, errorCallback ) {
     var thePic = new Image();

     thePic.onload = function() {
          callback();
          thePic.onload = function(){};
     }

     thePic.onerror = function() {
          errorCallback();
     }
     thePic.src = srcURL;
}

您的回调可以在适当的位置显示图像并处理/隐藏微调器，并且 errorCallback 可以防止您的页面“沙滩球”。所有事件驱动，没有计时器或轮询，而且您不必添加额外的 if 语句来检查图像是否在您设置事件时完成加载 - 因为它们是预先设置的，无论如何快速加载图像。

于 2010-05-25T06:32:57.110 回答
3

我喜欢 @duddle 的 jquery 方法，但发现 load() 并不总是被调用（例如从 IE 的缓存中检索图像时）。我改用这个版本：

$('img.example').one('load', function() {
  $('#spinner').remove();
}).each(function() {
  if(this.complete) {
    $(this).trigger('load');
  }
});

这最多调用一次加载，如果已经完成加载，则立即调用。

于 2011-10-02T04:42:00.480 回答
3

前段时间我写了一个 jQuery 插件来处理自动显示微调器http://denysonique.github.com/imgPreload/

查看它的源代码应该可以帮助您检测何时显示微调器并将其显示在加载图像的中心。

于 2012-11-24T06:19:41.430 回答
1

将微调器放在与图表大小相同的 div 中，您知道高度和宽度，因此您可以使用相对定位将其正确居中。

于 2008-09-09T07:42:27.097 回答
1

除了 lowsrc 选项，我还在' 容器background-image上使用了 a 。img

于 2008-09-10T20:37:19.630 回答
1

请注意，如果图像 src 不存在（http 404 错误），也会调用回调函数。为避免这种情况，您可以检查图像的宽度，例如：

if(this.width == 0) return false;
于 2010-06-21T09:45:48.560 回答
-1

@iAn 的解决方案对我来说看起来不错。我唯一要改变的是不使用 setTimeout，而是尝试挂钩图像“加载”事件。这样，如果图像的下载时间超过 3 秒，您仍然会得到微调器。

另一方面，如果下载时间较短，您将获得微调器的时间不到 3 秒。

于 2008-09-09T08:24:26.390 回答
-1

我会添加一些随机数字以避免浏览器缓存。

于 2009-11-04T14:56:20.343 回答