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。

我找到了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>

Answer 3

我不是铁轨程序员，但我的理解是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()都会执行，以确保预先加载正确的图像。

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

3 个答案: