javascript - 在 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()对图像路径执行了任何魔法，以确保预加载正确的图像。