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中预载鼠标悬停图片

回答

相关问题