Предварительная загрузка изображений при наведении курсора в Rails - PullRequest
Новая
       15

Предварительная загрузка изображений при наведении курсора в Rails

3 голосов
/ 11 ноября 2009

У меня в настоящее время кнопка ролловера реализована в рельсах следующим образом: 

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

Как я могу предварительно загрузить / кэшировать изображение при наведении курсора (home_over.gif), чтобы не было задержки, когда пользователь наводит указатель мыши на изображение? Thanx.

Ответы [ 3 ]

6 голосов
/ 11 ноября 2009

Вы уверены, что не хотите CSS Sprite здесь? По сути, вы помещаете свои изображения в одно изображение (Photoshop), устанавливаете изображение в качестве фона элемента привязки, затем настраиваете видимую область с помощью CSS для свойства background и состояний: hover и: visit. Только одно изображение должно быть загружено таким образом.

2 голосов
/ 17 апреля 2012

В моей среде используется 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>
0 голосов
/ 11 ноября 2009

Я не программист rails, но я понимаю, что Rails по умолчанию использует Prototype. Предполагая, что вы можете включить этот JavaScript: 

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

Затем добавьте этот код везде, где работает код загрузки. Может быть, что-то вроде этого: 

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

Вы должны будете убедиться, что магия, image_tag() совершаемая с путями изображений, гарантирует, что правильное изображение предварительно загружено.

...