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

【问题标题】：Chrome Image Preloading does not work on first image loadChrome 图像预加载在第一次图像加载时不起作用
【发布时间】：2013-01-03 08:57:09
【问题描述】：

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

【问题讨论】：

这很奇怪。我刚刚在家用 PC 上的 Chrome 上尝试过它，它工作得很好（没有从服务器重新请求图像）。有人能解释一下吗？
要添加一些上下文，我正在创建的页面是自定义页面上的 SharePoint WebPart。看起来图像响应标头正在影响 Chrome 的行为方式。
更多信息：已在 IE9 和 Opera 中测试，并且不会重新请求图像。在 Chrome 中，这个问题似乎是间歇性的。在新打开的选项卡上，重新请求图像。但是在同一个窗口上打开一个新标签，图像不会被重新请求。再次单击新选项卡上的刷新按钮会重新请求悬停和鼠标移出时的图像。
我也面临同样的问题。结果如何？
我检查了请求 - 唯一的区别是第二个请求的 cookie 不存在于第一个中。

标签： javascript css google-chrome preloading image-preloader

【解决方案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];
    }
}

【讨论】：

它正在显示图像，因为锚的 css 类最初设置为“imageOut”。

【解决方案2】：

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

您不使用图像精灵有什么原因吗？它们是该问题的规范解决方案。这个想法很简单，加载一个包含正常和“悬停”或“活动”状态的图像。显示的图形部分使用 css“背景位置”换出。这是一个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>

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

【讨论】：

为什么投反对票？介意解释吗？请向我显示请求完全相同的图像两次触发的网络窗格:)