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> 

このようにあなたのイメージの1がロードされている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

• は、プログラムあなたが
• をプリロードするすべての画像のための1つのiframeを開くには、SRCを設定しましたiframeをプリロードする画像に
• iframeのサイズをできるだけ小さく設定する

ブラウザとサーバーの設定に従って、画像が並列に読み込まれます。あなたがプリロードしたいすべての画像について

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

反復：

CSSはあなたが表示されますのdiv誰もの背景画像としてプリロードするイメージを設定します。