предварительная загрузка частичного представления в рельсах с помощью JavaScript

Question

Щелчком мыши по кнопке я переключаю изображение в div с другим частичным в Rails. Проблема в том, что загрузка изображения в этом фрагменте происходит медленно ... Я хочу предварительно загрузить в него изображение. Есть ли способ сделать это? Можно ли как-то предварительно загрузить частичку?

на мой взгляд

-@other_images.each do |img|
  .thumbnail_wrapper
    .thumbnail_image
      =image_tag img.image.url(:thumbnail), :class => 'button' , :onClick => "replaceImg(#{img.id});"

JS

function replaceImg(id){
  var url = '/images/refresh/' + id;
  new Ajax.Updater('content_image', url);
}

Большое спасибо!

Answer 1

Полагаю, ваше частичное отображается в виде. Предварительная загрузка обманывает браузер, чтобы убедиться, что ему нужен ресурс, и он нужен ему сейчас.

Javascript

Вы можете принудительно загружать изображения перед их отображением в Javascript:

<script language="javascript">
function img_preloader() {
     myimg = new Image();
     images = new Array();
     images[0]="image1.jpg";
     images[1]="image2.jpg";
     images[2]="image3.jpg";
     images[3]="image4.jpg";

     // start preloading
     for(i=0; i<=3; i++) {
          myimg.src=images[i];
     }
} 
</script>

Таким образом, для каждой итерации в цикле for загружается одно из ваших изображений.

Чтобы программно сгенерировать массив вы можете (в erb):

<script language="javascript">
function img_preloader() {
     myimg = new Image();
     images = new Array();
     <% @array_of_img_paths.each do |path| %>
     images.push("<%= path %>");
     <% end %>

     // start preloading
     for(i=0; i<images.length; i++) {
          myimg.src=images[i];
     }
} 
</script>

Просто HTML

• программно открыть один iframe для каждого изображения, которое вы хотите предварительно загрузить
• установите в качестве значения iframe изображение, которое вы хотите предварительно загрузить
• установить размер фрейма как можно меньше

Теперь изображения (предварительно) загружаются параллельно в соответствии с настройками браузера и сервера.

CSS

Установите изображение, которое вы хотите предварительно загрузить, так как фоновое изображение div никто не увидит:

div.noone_will_see {
    background-image: url("image1.jpg");
    background-repeat: no-repeat;
    background-position: -1000px -1000px;
}

Итерация для каждого изображения, которое вы хотите предварительно загрузить.