Chrome图像预加载不工作在第一个图像加载

Chrome Image Preloading does not work on first image load

本文关键字：图像 加载 第一个 工作 Chrome      更新时间：2023-09-26

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

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

我不得不说，我非常怀疑ping实际上是被请求从服务器在Chrome。你能在开发工具中发布一个时间轴的截图，显示请求发出两次吗?:)我认为你更有可能只是在重新粉刷的时候有点犹豫。

你不使用图像精灵有什么原因吗?它们是这个问题的标准解决方案。这个想法很简单，就是加载一个包含正常和"悬停"或"活动"状态的图像。使用css"background-position"将显示的图形部分交换出来。这是一个教程，这是一个支持"background-position"的表格，它可以一直追溯到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>

不需要脚本，而且更简洁。这样做的另一个好处是，如果需要的话，您仍然可以随时通过切换链接上的"active"类，以编程方式将图像更改为"hover"。

相关文章：