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

我目前在rails中实现了一个滚动按钮，如下所示：

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

“header/home\u over.gif”）%%>

---

如何预加载/缓存鼠标悬停图像（home_over.gif），以便用户在图像上移动鼠标时不会出现延迟？Thanx.

我不是rails程序员，但我的理解是rails默认使用原型。假设这样，您可以包含以下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\u tag（）

，以确保预加载了正确的图像。

您确定不希望在此处加载图像吗？基本上，您将图像状态放入一个图像（Photoshop），将图像设置为锚元素的背景，然后使用CSS调整背景属性的可见区域以及：悬停和：已访问状态。只有一个映像必须以这种方式下载。

我的环境使用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>

resource.alternate_image.url）%>
这里需要注意的是，Rails的
image\u标记
helper默认情况下将向资产路径附加时间戳，以允许在文件更改时立即使缓存失效。一旦你习惯了它，没有它你真的很难生活，我建议你不要为此而一起破解新东西。出于这个原因，我推荐安迪·阿特金森（Andy Atkinson）的答案。非常有趣，尽管这意味着Rails对鼠标器有强烈的偏见。每天学习新东西。：-）我相信Rails会在鼠标上方的图像上添加相同的时间戳。这里唯一的负面影响是它没有抽象预加载图像，我不认为这真的是“对鼠标盖的偏见”。在Rails中使用CSS Sprite技术应该和在任何web框架中一样可以实现。谢谢你让我知道Barry的时间戳。正如artlung所说，每天都要学习一些新的东西。事实上，我最终完全去掉了滚动按钮，使用了带有一个div集背景图像的标准链接。CSS精灵本来可以工作，但在内心深处，我真的很想去掉这些图像，以减少加载时间，并使将来添加更多菜单项变得更容易。感谢您的回答和CSS精灵的链接，这将在将来派上用场。