這些預加載的圖像是否正確使用？

這是非常具體的，所以我不能只是在互聯網上找到答案！這些預加載的圖像是否正確使用？

我有一些代碼，加載在我要上懸停顯示一些圖像。一切正常，但有時在點擊使用懸停功能的div中的複選框時會有延遲。

jQuery(document).ready(function(){ 

$icons = []; 

$('#boat_icon').hide(); 

jQuery('.boat_row').each(function(e){ 
      $icons.push('url("' + $(this).attr("id") + '")'); 
      }); 

jQuery($icons).each(function(e){ 

jQuery('#boat_icon').css('background-image', this); 

console.log(this + "loaded!"); 

}); 

$('#boat_icon').show(); 
}); 

jQuery('.boat_row').hover(function(e){ 
    e.preventDefault(); 

    $(this).css('background-color', 'D8EAFF') 

    var iconpath = $(this).attr("id"); 
    $('#boat_icon').css('background-image', 'url("'+iconpath+'")'); 
    }, 

    function(){ 
    $(this).css('background-color', '') 
});

iconpath是數據庫中的字符串，所以我想知道......這是使用預加載圖像的正確方法嗎？因爲圖像已準備好加載，它們是從緩存中使用的，還是每次懸停時都會再次加載它們，因爲我沒有顯示存儲的圖像對象？

來源

2011-10-25 JackalopeZero

在它取決於在圖像被從加載在瀏覽器中結束。您可以嘗試通過使用CSS-精靈和配置文件的ETag的 –

使用圖像精靈，然後再考慮只是改變他的背景位置CSS改善appereance，沒有JS需要 –

Dr.Molle，莫因扎曼，我見過使用CSS精靈使用背景定位，但從未使用過。有點急於發佈這個應用程序，所以沒有時間學習這一次，但感謝您的意見。我看了看他們:)非常有用！ – JackalopeZero

你應該使用這個預載：

if (document.images) 
{ 
    pic1= new Image(100,25); 
    pic1.src="http://someplace.com/image1.gif"; 
}

if (document.images)用於驗證不瀏覽器支持預加載圖像

來源

2011-10-25 11:52:56 Sergey

這是我所見過的，但不幸的是，似乎並不理想用於此應用程序。感謝您的輸入！ – JackalopeZero

這些預加載的圖像是否正確使用？

回答

相關問題