J'ai actuellement un bouton de retournement mis en œuvre dans des rails comme suit:préchargement Mouseover Images dans Rails
<%= image_tag("header/home_but.gif", :mouseover => "header/home_over.gif") %>
Comment puis-je preload/cache l'image mouseover (home_over.gif) donc il n'y a pas de retard lorsque l'utilisateur se déplace leur souris sur l'image? Merci.
Etes-vous sûr de ne pas vouloir un CSS Sprite ici? Fondamentalement, vous mettez vos états d'image dans une image (Photoshop), définissez l'image comme arrière-plan d'un élément d'ancrage, puis ajustez la zone visible avec CSS pour la propriété background et les états: hover et: visited. Une seule image doit être téléchargée de cette façon.
Je ne suis pas un programmeur de rails, mais je crois comprendre que Rails utilise Prototype par défaut. En supposant que, vous pouvez inclure ce JavaScript:
Prototype.preloadImages = function(){
for(var i=0, images=[]; src=arguments[i]; i++){
images.push(new Image());
images.last().src = src;
}
};
Puis ajoutez ce code partout où votre code de chargement s'exécute. Peut-être quelque chose comme ceci:
Event.observe(window, 'load', function(){
Prototype.preloadImages('header/home_over.gif','another/image/to/preload.gif');
});
Vous devrez assurer que tout ce que la magie image_tag() ne se fait aux chemins d'image pour assurer que l'image correcte est pré-chargé.
Quelque chose à être au courant ici est que 'l'aide de image_tag' Rails par défaut ajoutera horodatages aux chemins d'actifs pour permettre l'annulation de cache instantanée lors d'un changement de fichier. Il est vraiment difficile de vivre sans cela une fois que vous y êtes habitué, et je vous recommande d'éviter de pirater quelque chose de nouveau pour cela. Je suggère la réponse d'Andy Atkinson pour cette raison. –
Très intéressant, bien que l'implication est que Rails a un fort biais contre mouseovers. Apprendre quelque chose de nouveau chaque jour. :-) – artlung
Rails fait le même horodatage en ajoutant aux images mouseover, je crois. Le seul point négatif ici est qu'il n'a pas extrait d'images de préchargement, ce qui, à mon avis, ne peut pas vraiment être considéré comme un «biais contre les mouseover». Utiliser la technique CSS Sprite devrait être également réalisable dans Rails comme dans n'importe quel framework web. –
Mon environnement utilise jQuery, donc je voulais que la solution utilise également jQuery.
J'ai trouvé another question sur le préchargement des images avec jQuery, et sa meilleure réponse avait le jQuery préécrit pour moi. J'adapté mon code comme suit dans 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>
En fait, j'ai fini par supprimer les boutons de survol et d'aller avec les liens standards avec une seule image background_du div. Un Sprite CSS aurait fonctionné mais au fond je voulais vraiment me débarrasser des images pour réduire le temps de chargement et faciliter l'ajout d'autres éléments dans le futur. Merci pour votre réponse et le lien vers CSS Sprites qui sera utile à l'avenir. –