1

マウス ホバーとマウス アウトで別の背景画像を表示するページにアンカーがあります。マウスのホバー/アウト時にサーバーから画像のちらつきや再要求を避けるために、画像をプリロードしました。スクリプトは IE8/FF では問題なく動作しますが、Chrome では動作が異なります。Chrome の最新バージョンでは、初めてアンカーにカーソルを合わせると、サーバーから画像が再要求され、ちらつきが発生します。これはなぜですか? マウスのホバー/アウトの成功は正常に機能し、ちらつきはありません。

以下のコード:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<style type="text/css">
body:after
{
  content: url('/images/1.png') url('/images/1a.png')
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.imageHover
{
   display:inherit;
   width:25px;
   height:50px;
   background:url('/images/1.png') no-repeat;
}

.imageOut
{
   display:inherit;
   width:25px;
   height:50px;
   background:url('/images/1a.png') no-repeat;
}
</style>

<script language="javascript" type="text/javascript">
    var oneSelected = new Image();
    var oneUnselected = new Image();

    oneSelected.src="/images/1.png";
    oneUnselected.src="/images/1a.png";

    function OnImageMouseOver(target) {
       $(target).toggleClass('imageHover', true);
       $(target).toggleClass('imageOut', false);
    }
    function OnImageMouseOut(target) {
       $(target).toggleClass('imageHover', false);
       $(target).toggleClass('imageOut', true);
    }
</script>
</head>
<body>
   <a href="#" class="imageOut" onmouseover="OnImageMouseOver(this)" onmouseout="OnImageMouseOut(this)"></a>
</body>
</html>

アンカーを画像に変換しましたが、Chrome ではまだ機能しません:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">    
    if (document.images) {
        var oneSelected = new Image();
        var oneUnselected = new Image();

        oneUnselected.src = '/images/1a.png';
        oneSelected.src = '/images/1.png';
    }

    function OnRatingMouseOver(target, newSrc) {
        $(target).attr('src', newSrc);
    }

    function OnRatingMouseOut(target, newSrc) {
        $(target).attr('src', newSrc);        
    }
</script>

</head>
<body>
<div id="mainDiv" style="width:400px;">
      <div id="inputDiv">
         <table id="inputTable">
            <tr>
               <td>Rating</td>
               <td>
                  <img id='rating1Anchor'
                        src='/images/1a.png'
                        onmouseover="OnRatingMouseOver(this, '/images/1.png');"
                        onmouseout="OnRatingMouseOut(this, '/images/1a.png');"
                        onclick="OnRatingClick(this, '/images/1.png', 1);">
                  </td>
           </tr>           
         </table>
      </div> 
</div>
</body>
<html>
4

2 に答える 2

0

それらを表示していないため、DOMに追加しているだけなので、まったくプリロードしていない可能性がありますか? 次のコードを試して、画像をプリロードしてください。

var preload = new Array();

function preload_image(){
    for (var x = 0; x < preload_image.arguments.length; x++)
    {
        preload[x]     = new Image();
        preload[x].src = preload_image.arguments[x];
    }
}
于 2013-01-03T09:01:56.757 に答える
-1

PNGが実際にChromeのサーバーから再要求されていることは非常に疑わしいと言わざるを得ません。リクエストが 2 回発生したことを示す開発ツールのタイムラインのスクリーンショットを投稿できますか? :) 再描画中にわずかな躊躇を経験している可能性がはるかに高いと思います.

画像スプライトを使用していない理由はありますか? それらは、この問題に対する標準的な解決策です。アイデアは、通常の状態と「ホバー」または「アクティブ」状態の両方を含む単一の画像が読み込まれるという単純なものです。表示されているグラフィックの部分は、css「background-position」を使用して交換されます。ここにチュートリアルがあります。IE4 までさかのぼる「background-position」のサポートの表は次のとおりです。

コードは次のようになります。

<html>
<head>
    <style>

    #myCoolLink {
        background-image:url('img/image.gif');
        background-position:0px 0px;
    }
    #myCoolLink:hover,
    #myCoolLink.active {
        background-position:0px -72px; //depending of course on the image
    }
    </style>
</head>
<body>
   <a href="#" id="myCoolLink"></a>
</body>
</html>

スクリプトは不要で、はるかに簡潔です。これのもう 1 つの大きな利点は、必要に応じて、リンクの「アクティブ」クラスを切り替えることで、いつでもプログラムで画像を「ホバー」に変更できることです。

于 2013-01-26T01:43:58.553 に答える