在 Rails 中预加载鼠标悬停图像

Question

我目前在 Rails 中实现了一个翻转按钮，如下所示：

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

如何预加载/缓存鼠标悬停图像 (home_over.gif)，以便用户将鼠标移到图像上时不会出现延迟？谢谢。

Answer 1

您确定不想要这里的 CSS Sprite 吗？基本上，您将图像状态放入一张图像中 (Photoshop)，将图像设置为锚元素的背景，然后使用 CSS 调整背景属性以及 :hover 和 :visited 状态的可见区域。通过这种方式只需下载一张图像。

Answer 2

我的环境使用 jQuery，因此我希望解决方案也使用 jQuery。

我发现另一个问题关于使用 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>

Answer 3

我不是 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() 操作，以确保预加载正确的图像。