Question

我在页面上有锚点，在鼠标悬停和鼠标移出时显示不同的背景图像。我已预加载图像以避免在鼠标悬停/退出时闪烁并从服务器重新请求图像。这些脚本在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>

Answer 1

它可能根本没有预加载它们，因为它没有显示它们只是添加到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];
    }
}

Answer 2

我不得不说我非常怀疑png实际上是从Chrome中的服务器重新检测到的。您可以在开发工具中发布时间轴的屏幕截图，显示请求两次关闭吗？ :)我认为你更有可能在重画过程中遇到轻微的犹豫。

你有没有使用图像精灵的原因？它们是解决此问题的规范解决方案。这个想法只是加载了一个包含正常和“悬停”或“活动”状态的单个图像。显示的图形部分使用css“background-position”换出。这是一个tutorial，这里有一个table of support用于“背景位置”，它一直回到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>

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

Chrome图像预加载在第一次图像加载时不起作用

2 个答案: