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

StackOverflow https://stackoverflow.com/questions/51352

  •  09-06-2019
  •  | 
  •  

题

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

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

我一直通过 JavaScript 来完成此操作，到目前为止，它可以使用以下代码

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

问题是，当用户单击链接时，图表可能需要几秒钟的时间才会发生变化。这会让用户认为他们的点击没有执行任何操作，或者系统响应缓慢。

我想要发生的是显示一个旋转器/颤动器/状态指示器，代替图像加载时的位置，因此当用户单击链接时，他们至少知道系统已接受他们的输入并正在执行某些操作。

我尝试了一些建议，甚至使用伪超时来显示旋转器，然后弹回到图像。

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

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

这将是理想的，除了旋转器比正在显示的图表小得多。

还有其他想法吗？

有帮助吗？

解决方案

我使用类似的方法来预加载图像，然后在图像加载完成时自动回调我的 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(){};
    }
  }
}

其他提示

您可以显示一个静态图像，该图像给出了 旋转轮的视错觉，就像这些.

使用 加载（） 的方法 jQuery, ，一旦加载图像就可以轻松执行某些操作：

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

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

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

将包含微调器的 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";
}

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

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

例如

document.getElementById('mainimg').src = '/images/1pix.gif';
document.getElementById('mainimg').src = '/images/large_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;
}

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

前段时间我写了一个 jQuery 插件，它可以自动处理显示旋转器 http://denysonique.github.com/imgPreload/

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

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

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

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

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

除了 lowsrc 选项之外，我还使用了 background-image 于 img的容器。

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

if(this.width == 0) return false;

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

另一方面，如果下载时间较短，您将获得旋转图标的时间少于 3 秒。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top