鉻圖像預加載不適用於第一個圖像加載

我有一個頁面上的錨點，在鼠標懸停和鼠標懸停時顯示不同的背景圖像。我預先加載了圖像以避免閃爍，並在鼠標懸停/彈出時從服務器重新請求圖像。這些腳本在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>

來源

2013-01-03 rro

這很奇怪。我只是在我的家用電腦上的Chrome上試過它，它運行得很好（圖像不需要從服務器重新請求）。任何人都可以闡明這一點嗎？ – rro

要添加一些上下文，我創建的頁面是自定義頁面上的SharePoint WebPart。看起來，圖像響應標題正在以Chrome的行爲方式播放。 – rro

更多信息：在IE9和Opera中測試並且圖像不被重新請求。在Chrome中，問題似乎是間歇性的。在新打開的選項卡上，圖像被重新請求。但是在同一個窗口中打開一個新標籤，圖像不會被重新請求。單擊新選項卡上的刷新按鈕再次請求懸停和鼠標移出的圖像。 – rro

它可能無法在所有預加載它們，因爲它沒有顯示它們它只是添加到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-03 09:01:56

它正在顯示圖像，因爲錨點的CSS類最初設置爲「imageOut」。 – rro

-1

我不得不說，我非常懷疑，pngs實際上是從Chrome中的服務器重新申請。你可以在開發工具中發佈時間軸的屏幕截圖，顯示請求已關閉兩次嗎？ :)我認爲在重新繪製過程中，你很可能會有輕微的猶豫。

是不是有沒有原因你不使用圖像精靈？他們是這個問題的標準解決方案。這個想法很簡單，就是加載包含正常和「懸停」或「活動」狀態的單個圖像。顯示的圖形部分使用css「background-position」換出。這是一個，這裏是一個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>

無需腳本，它更加簡潔。這樣做的另一個好處是，如果您需要，您仍然可以通過切換鏈接上的「活動」類來以編程方式將圖像更改爲「懸停」。

來源

2013-01-26 01:43:58 Ben

爲什麼downvote？謹慎解釋？請向我展示網絡窗格，請求兩次完全相同的圖像發射:) – Ben

鉻圖像預加載不適用於第一個圖像加載

回答

相關問題