Question

以下是IE8-9中加载指示器的异常行为示例（位于选项卡上）

http://afternoon-river-5822.herokuapp.com/

有两个链接：第一个打开＆＃34;快速＆＃34;页面，另一个 - ＆＃34;慢＆＃34;一个好像有一些计算。它在大约20秒内打开。

这些链接有两个图像。第一个是默认状态，第二个是突出显示。

问题是：如果点击＆＃34;慢＆＃34;在IE8-9中链接并从链接移开鼠标然后IE将停止进度 - 选项卡上的微调器将消失。大约20秒后，将显示一个新页面。但是，如果在点击链接后没有触摸鼠标（图像不会更改为默认值），那么指示器将正常工作 - 将旋转直到新页面完全加载。

我该如何避免这种行为？

CSS：

.b-mainmenu li {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  min-width: 58px;
  height: 100px;
  margin-right: -6px;
}

.b-mainmenu li a {
  display: block;
  font: bold 11px "Lucida Grande",tahoma,arial,sans-serif;
  color: #5d5e5b;
  min-width: 58px;
  padding-top: 36px;
  background-position: 50% 3px;
  background-repeat: no-repeat;
  margin-right: 3px;
  margin-left: 3px;
}

.b-mainmenu li a:hover, 
.b-mainmenu li.active a {
  text-decoration: none;
  color: #fff;
}

a {
  display: block; width: 341px; height: 97px;
}
.b-mainmenu-fast {
  background-image: url(/assets/menu-home.png);
}
.b-mainmenu-slow {
  background-image: url(/assets/menu-backup.png);
}
.b-mainmenu-fast:hover {
  background-image: url(/assets/menu-home_aa.png);
}
.b-mainmenu-slow:hover {
  background-image: url(/assets/menu-backup_aa.png);
}

HTML：

<ul class="b-mainmenu">

<li><a class="b-mainmenu-fast" href="page/fast_page">Fast page</a></li>
<li><a class="b-mainmenu-slow" href="page/slow_page">Slow page</a></li>

</ul>

Answer 1

也许您可以避免在悬停时更改与URL相关的属性？相反，设置background-color和其他propoperies以达到所需的视觉效果。如果没有URL更改，加载指示器将正常工作。我已经检查了数据网址是否会产生任何影响 - 遗憾的是没有。

您希望加载新页面需要花费大量时间，在这种情况下，我建议您显示一些进度指示器，而不关心选项卡上的内置微调器。当用户点击链接时，您可以更改某些动画gif的图像背景。

IE加载指示器和图像链接

1 个答案: