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

我不得不说我非常怀疑这些 pngs 实际上是从 Chrome 中的服务器重新请求的。您可以在开发工具中发布时间线的屏幕截图，显示请求两次吗？:) 我认为您更有可能只是在重绘期间稍有犹豫。

你不使用图像精灵有什么原因吗？它们是该问题的规范解决方案。这个想法很简单，加载一个包含正常和“悬停”或“活动”状态的图像。显示的图形部分使用 css“背景位置”换出。这是一个教程，这是一个支持“背景位置”的表格，它一直可以追溯到 IE4。

代码应如下所示：

<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>

不需要脚本，而且更简洁。这样做的另一个巨大优势是，如果需要，您仍然可以随时通过切换链接上的“活动”类以编程方式将图像更改为“悬停”。

于 2013-01-26T01:43:58.553 回答