用JavaScript預加載Rails中的部分視圖

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的src設置為您要預加載的圖像
• 將iframe尺寸設置得盡可能小

現在，根據瀏覽器和服務器設置並行並行（預）加載圖像。

CSS

將您要預加載的圖像設置為沒人能看到的div背景圖像：

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

迭代要預加載的每個圖像。