Rails中預載鼠標懸停圖片

我目前在軌實現翻轉按鈕如下：Rails中預載鼠標懸停圖片

<%= image_tag("header/home_but.gif", :mouseover => "header/home_over.gif") %>

我如何預加載/緩存的鼠標懸停圖像（home_over.gif），所以沒有延遲當用戶移動他們的鼠標在圖像上？感謝名單。

來源

2009-11-10 Chris C

您確定不需要CSS Sprite？基本上，你把你的圖像狀態放入一個圖像（Photoshop）中，將圖像設置爲錨點元素的背景，然後使用CSS調整背景屬性和：hover和visited狀態的可見區域。只有一個圖像需要以這種方式下載。

來源

2009-11-11 03:22:07

我實際上最終刪除了翻轉按鈕，並使用帶有div集的單個background_image的標準鏈接。一個CSS Sprite可以工作，但內心深處，我真的想擺脫圖像，以減少加載時間，並使未來更容易添加更多的菜單項。感謝您的回答以及CSS Sprites的鏈接，這些將在未來派上用場。 – 2009-11-13 05:48:57

我不是一個rails程序員，但我的理解是Rails默認使用Prototype。假設您可以包含以下JavaScript代碼：

Prototype.preloadImages = function(){ 
    for(var i=0, images=[]; src=arguments[i]; i++){ 
     images.push(new Image()); 
     images.last().src = src; 
    } 
};

然後添加此代碼，無論您的onload代碼運行在哪裏。也許是這樣的：

Event.observe(window, 'load', function(){ 
    Prototype.preloadImages('header/home_over.gif','another/image/to/preload.gif'); 
});

你必須保證，無論魔術image_tag()並做是爲了成像路徑，以確保正確的圖像預加載。

來源

2009-11-10 22:06:04 artlung

一個需要注意的這裏是Rails的'image_tag'默認助手將追加時間戳資產路徑，以允許在一個文件更改即時緩存失效。一旦你習慣了它，如果沒有這個，真的很難活，而且我建議避免爲了這件事而一起黑客攻擊新東西。我建議安迪阿特金森回答這個問題。 – 2009-11-11 03:59:44

非常有趣，但意味着Rails對鼠標懸停有強烈的偏見。每天學些新東西。 :-) – artlung 2009-11-11 07:51:27

我相信，Rails的追蹤鼠標懸停圖像的時間戳是相同的。這裏唯一的缺點是它沒有抽象預加載圖像，我認爲它不能被認爲是「對鼠標懸停的偏見」。在任何Web框架中，使用CSS Sprite技術應該可以在Rails中同樣實現。 – 2009-11-11 15:34:28

我的環境使用jQuery，所以我希望解決方案也使用jQuery。

我發現another question關於用jQuery預加載圖片，它的頂部答案有jQuery爲我預先編寫的。我適應我的代碼如下所示爲ERB：

<% alternate_images = [] %> 
<% @resources.each do |resource| %> 
    <%= image_tag(resource.primary_image.url, :mouseover => resource.alternate_image.url) %> 
    <% alternate_images << resource.alternate_image.url %> 
<% end %> 
<script type="text/javascript"> 
$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 
$([<% alternate_images.each do |image| %> 
    "<%= image %>", 
    <% end %>]).preload(); 
</script>

來源

2012-04-17 19:52:36

Rails中預載鼠標懸停圖片

回答

相關問題