Preload Mouseover Imagens em Rails

Question

Actualmente tenho um botão de rolagem implementado em trilhos da seguinte forma:

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

Como posso pré-carga / cache a imagem mouseover (home_over.gif), de modo que não há atraso quando o usuário move o mouse sobre a imagem? Thanx.

Answer 1

Você tem certeza que não quer um CSS Sprite aqui? Basicamente você colocar sua imagem estados em uma imagem (Photoshop), definir a imagem como fundo de um elemento âncora, em seguida, ajustar a área visível com CSS para a propriedade de fundo ea: hover e: estados visitados. Apenas uma imagem tem que baixar este caminho.

Answer 2

O meu ambiente usa jQuery, então eu queria a solução para usar jQuery também.

outra pergunta sobre o pré-carregamento de imagens com jQuery, e da resposta superior teve o jQuery pré-escrita para mim. Eu adaptei meu código da seguinte forma em 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

Eu não sou um trilhos programador, mas o meu entendimento é que Rails utiliza Prototype por padrão. Assumindo que, você poderia incluir este JavaScript:

Prototype.preloadImages = function(){
    for(var i=0, images=[]; src=arguments[i]; i++){
        images.push(new Image());
        images.last().src = src;
    }
};

Em seguida, adicione este código onde quer que seu código é executado onload. Talvez algo como isto:

Event.observe(window, 'load', function(){
    Prototype.preloadImages('header/home_over.gif','another/image/to/preload.gif');
});

Você terá que garantir que tudo o que image_tag() magia não é feito para os caminhos de imagem para assegurar que a imagem correta é pré-carregado.