1

これは、IE8-9 (タブ上にある) のロード インジケーターの奇妙な動作の例です。

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

2 つのリンクがあります。1 つ目は「速い」ページを開き、もう 1 つ - あたかも何らかの計算があるかのように「遅い」ページを開きます。約20秒で開きます。

これらのリンクには 2 つの画像があります。1 つ目はデフォルト状態用、2 つ目は強調表示用です。

問題は: 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>
4

1 に答える 1

0

ホバー中に URL 関連のプロパティを変更することを避けることができるでしょうか? 代わりに、background-color目的の視覚効果を実現するためにプロパティを設定します。URL を変更しなければ、ロード インジケーターは正常に機能します。データ URL が違いを生むかどうかを確認しましたが、残念ながらそうではありません。

新しいページの読み込みに時間がかかることが予想されます。その場合は、進行状況インジケーターを表示することをお勧めします。タブに組み込まれているスピナーはあまり気にしません。ユーザーがリンクをクリックしたときに、アニメーション gif の画像の背景を変更できます。

于 2013-06-07T08:18:46.023 に答える