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

IT技术 javascript jquery dom
2021-01-24 06:24:27

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

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

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

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

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

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

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

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

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

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

还有其他想法吗？

6个回答

我已经使用这样的东西来预加载图像，然后在图像加载完成后自动回调我的 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的load()方法，可以很容易地在加载图像后立即执行某些操作：

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

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

的usagaeload以这种方式现在已经过时（在3.0移除）和已被替换为负载的事件
2021-04-09 06:24:27

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

在图表图像上方放置一个包含微调器的 div，并将其 css display 属性设置为 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";
}
setTimeout 不需要引号中的第一个参数 - 您可以这样调用它： setTimeout(hideSpinner, spinnerShowTime); 这节省了让 JS 解释器评估字符串的步骤，这只是开销。
2021-03-20 06:24:27
@iAn 您在答案中添加的链接已损坏
2021-03-25 06:24:27
在这种情况下会更快，但是在您想将参数传递给函数的情况下，我发现将事物包含在 dbleQts 中以减少问题（我认为以牺牲易读性为代价）
2021-04-11 06:24:27

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

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

例如

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

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

其它你可能感兴趣的问题
上一篇如何重新加载/刷新 jQuery 数据表？ 下一篇Javascript中变量是如何分配内存的？