Javascript Chrome图像预加载在第一次加载图像时不起作用_Javascript_Css_Google Chrome_Preloading_Image Preloader

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

javascript css google-chrome

Javascript Chrome图像预加载在第一次加载图像时不起作用,javascript,css,google-chrome,preloading,image-preloader,Javascript,Css,Google Chrome,Preloading,Image Preloader,我在一个页面上有锚，该页面在鼠标悬停和鼠标移出时显示不同的背景图像。我已经预加载了图像，以避免在鼠标悬停/移出时闪烁和重新请求服务器的图像。这些脚本在IE8/FF上运行良好，但Chrome的行为不同。在最新版本的Chrome中，当我第一次悬停在锚上时，服务器会重新请求图像，导致闪烁，这是为什么？成功的鼠标悬停/移出工作正常，没有闪烁代码如下： <html> <head> <script src="http://code.jquery.com/jquery-1.8.

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

我不得不说，我非常怀疑PNG是否真的是从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>

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

当锚的css类最初设置为imageOut时，它会显示图像。这很奇怪。我刚刚在家用电脑的Chrome上试用过，效果很好，服务器没有重新请求图像。有人能解释一下吗？为了添加一些上下文，我正在创建的页面是自定义页面上的SharePoint Web部件。图像响应标题似乎在Chrome的行为方式中发挥作用。更多信息：在IE9和Opera中进行了测试，图像不会被重新请求。在Chrome中，问题似乎是间歇性的。在新打开的选项卡上，重新请求图像。但是，在同一窗口上打开一个新选项卡时，不会重新请求图像。再次单击“新建”选项卡上的“刷新”按钮，重新请求悬停和鼠标悬停时的图像。我面临同样的问题。结果是什么？我已经检查了请求-唯一的区别是第二个请求的cookie在第一个请求中不存在。为什么否决？想解释一下吗？请向我显示网络窗格，其中包含两次完全相同的映像触发请求：