image_tagで使用するためにURLを返すようにコントローラアクションを非同期に呼び出す

Question

現在、次のようなビューがあります。問題は、get_character_thumbnailが、画像URLを取得するためにAPIを呼び出し、ユーザーがページデータを要求したときに同期が完了してしまうことです。

<% @comic.characters.each do |character| %> 
     <div class = "col-sm-6 col-md-3"> 
      <div class = "thumbnail"> 
       <%= image_tag(get_character_thumbnail(character)) %> 
      </div> 
      <div class = "caption"> 
       <p><%= character['name'] %></p> 
      </div> 
     </div> 
    <% end %> 

は私がget_character_thumbnail(character)への各呼び出しは非同期で実行されることを強制するとページが立ち往生しません。

def get_character_thumbnail(character) 
    response = HTTParty.get(character['resourceURI'], get_basic_api_options) 
    response['data']['results'][0]['thumbnail']['path'] + '/portrait_large.jpg' 
end 

私はセットアップにトリックを行うには、AJAX呼び出しを少し苦労してるのRuby on Railsにはかなり新しいですので。誰かが私を助けることができる提案やリンクを持っていますか？

Answer 1

あなたのルートは常にすぐに応答を返します。ここでは、1つの文字イメージを提供するカスタムエンドポイントを作成する1つの方法を示します。あなたのhtmlページはすぐに読み込まれ、あなたの画像ルートを指すようにimg src属性を設定することができます。ここで

は、明確にするために、いくつかのサンプルコードです：

一部html.erbテンプレート

<% @comic.characters.each do |character| %> 
    <img src='/character_image/<%= character.id %>'> 
<% end %> 

このコードでは、画像をキャッシュします

def character_image 
    @char = Character.find(id: params[:id]) 
    img_path = "tmp/char_img_#{@char.id}.jpg" 
    unless File.exists?(img_path) 
    img_url = get_char_img(@char) # hit your API to get the url 
    `wget #{img_url} -O #{img_path}` 
    end 
    send_file img_path, type: 'image/jpg', disposition: 'inline' 
end 

新しいルート、get '/character_image/:id "たとえば、HTMLページが更新された場合に、重複したAPIリクエストを避けるためです。

私はtmp/を使用しています。これは、Herokuの書き込み可能な場所（他の場所へのファイルシステム書き込みをブロックするため）です。他の環境（例えば、ローカル）では、画像をpublic/に保存することもできます。これはデフォルトでは静的に扱われます。

Answer 2

あなたはAJAXコールを行い、応答してすべてのイメージを取得する必要があります。 その後、Javascriptオブジェクトに格納します。ページのフリーズのため

理由 -

1. は、JavaScriptの閉鎖概念を使用していない可能性がありますので。ブラウザで複数の画像ファイルを読み込んだり読み込んだりするのは、最初の繰り返しでFile-1が読み込まれず、次の繰り返しにジャンプし、ときどきランダムな画像ファイルを読み込まなくてブラウザをフリーズすることがあるからです。

私の画像プレビューライブラリ（https://github.com/palash-kulkarni/image_uploader/blob/master/image-uploader-1.0.0.js）を確認することができます。進行中ですが、間違いなくあなたを助けるでしょう。 （https://github.com/palash-kulkarni/image_uploader/tree/master/Demo）

$.each(files, function (_, file) { 
    if (image.types.test(file.type)) { 
     that.displayPreview(file, categoryName, image); 
     that.bindSingleDeleteEvent(categoryName, image); 
    } else { 
     that.clientMessage.display('#flash', image.failureMessage.invalidFileType); 
    } 
}); 
// Iterate object of images 
    reader = new FileReader(); 
    reader.onload = (function (img) { 
     return function (event) { 
      img.attr('src', event.target.result); 
     }; 
    })(img); 
    reader.readAsDataURL(imageFile); 
// End Iterator