加載並訪問加載的所有圖像

我有一個頁面，菜單按鈕（它們是圖像）是白色的，但我希望它們在懸停時變成紅色並返回到白色的鼠標狀態。所以我有相應的紅色菜單按鈕。因此，如果白色按鈕是motors1.jpg，則紅色按鈕是motors2.jpg，因此JQuery代碼下面的算法。加載並訪問加載的所有圖像

<table> 
<tr> 
<td><img class="navimg" src="images/home1.gif"/></td> 
<td><img class="navimg" src="images/motors1.gif"/></td> 
<td><img class="navimg" src="images/about_us1.gif"/></td> 
<td><img class="navimg" src="images/media1.gif"/></td> 
<td><img class="navimg" src="images/forums1.gif"/></td> 
<td><img class="navimg" src="images/dealers1.gif"/></td> 
<td><img class="navimg" src="images/whats_new1.gif"/></td> 

</tr> 
</table>

jQuery代碼是：

$(document).ready(function(){ 
    $('.navimg').mouseover(function(){ 
    source=$(this).attr('src').replace('1','2'); 
    $(this).attr('src',source); 

    }).mouseout(function(){ 
    source= source.replace('2','1'); 
    $(this).attr('src',source); 
    }); 

});

我已經使用外部CSS樣式表定位

      .navimg{ 
         width: 125.5px; 
         height: 34px; 
            }

所以問題：我注意到，有一個滯後的頁面時首先加載的白色按鈕更改爲紅色的。我認爲滯後是因爲紅色按鈕沒有加載頁面加載（因此不在瀏覽器緩存中），因此jQuery代碼重新加載它們。因此，任何解決這個問題的方法都可能是將它們加載爲隱藏的輸入，然後將它們加載到瀏覽器緩存中，或者通過其他方式來解決這個問題。

來源

2012-06-08 William The Dev

我會通過加入motor1.gif和motors2.gif來做到這一點，成爲motors.gif。

如果您製作了一張圖像，上面是白色圖像，下面是紅色圖像，那麼您的mouseover/mouseout（ps。檢出hover）只需更改圖像偏移量，不需要預加載。

來源

2012-06-08 11:04:36 paul

什麼您加入圖像組合在一起的意思是......這就像Photoshop圖層？你不能用圖片格式來做到這一點。 –

是這樣的：http://css-tricks.com/css-sprites/ – paul

只需使用圖像精靈source

您將有一個菜單按鈕一個圖像文件，該文件將包含白色和紅色的圖像，所以你只需要在懸停動作改變background-position。這是非常快速的，圖像加載完全，你不需要使用一些javascripts，只有CSS 。

來源

2012-06-08 11:07:14

使用精靈是最好的解決方案。

但是，如果這不適用於您，則可以使用以下JavaScript方法（取自Dreamweaver）預加載圖像。

在html標籤後添加以下內容。

<script type="text/JavaScript"> 
function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 
</script>

以下屬性添加到您的身體標記：

onload="MM_preloadImages('path of image goes here')"

來源

2012-06-08 11:17:19

加載並訪問加載的所有圖像

回答

相關問題