2017-01-04 4 views
0

私はユーザのコンテンツを表示するレールアプリで作業しています。私のコントローラ#showアクションの1つで、私は「次のアップ」コンテンツの推奨を生成するためにAPI呼び出しを行います。このapi呼び出しには、応答時間は5秒かかりますが、時間がかかりすぎますが、ページをロードする前にユーザーが待機するには時間がかかります。ビューを読み込むときに長いAPIリクエストを処理する方法

ユーザーがページの2/3をスクロールしてページが最初に読み込まれたときにそこにいる必要がないようにするまで、推奨事項自体は表示されません。

私の質問は、残りのページのコンテンツを読み込み、API呼び出しが完了し、推奨事項が準備されるまで、ページのその部分だけを読み込むのに良い方法はありますか?前もって感謝します!

コントローラ

class DiscoverEmailsController < ApplicationController 
    def show 
    @discover_email = DiscoverEmail.find_by(message_id: params[:message_id]) 

    #just in development for now 
    @up_next = Rails.env.development? 
     #API call that takes too long to wait for 
     up_next_ids = RecommendationsHelper.get_one_step_recommendations(@discover_email.subject, @discover_email.preview, @discover_email.senders_name) 

     up_next_ids.each do |message_id_and_score| 
      break if @up_next.length >= 4 

      discover_email = DiscoverEmail.find_by(message_id: message_id_and_score[1]) 

      unless discover_email.nil? 
       @up_next << discover_email unless discover_email.image_url.nil? || discover_email.senders_name.nil? || discover_email.subject.nil? 
      end 
     end 
    else 
     @up_next = DiscoverEmail.where.not(senders_name: nil, image_url: nil, subject: nil).order(date: :desc).last(4) 
    end 

    DiscoverEmail.track_view(email_address, @discover_email) 
    end 
end 

ビューボディ

<body class="iframe-page"> 

<h3 class="email-subject"><%= @discover_email.subject %></h3> 

<div class="iframe-content"> 
    <iframe id="iframe" sandbox="allow-same-origin allow-scripts allow-popups" src="<%= @url %>" allowfullscreen></iframe> 


    #Section I'd like to wait to load since it's hidden until users are most of the way down the page 
    <div id="discover-up-next"> 
    <div id="up-next-border"> 
     <div class="border-lines"></div> 
     <p id="up-next-text">NEXT UP</p> 
     <div class="border-lines"></div> 
    </div> 

    <div id="up-next-cells" style="display: inline-flex; height: 110px;"> 
     <% @up_next.each_with_index do |discover_email, index| %> 
     <% if discover_email.subscription.clearbit_logo_url.nil? || discover_email.subscription.clearbit_logo_url == "noclearbitlogo" %> 
     <%  logo_safe = "https://s3-us-west-2.amazonaws.com/myblendappimages/blend_logo_mashup_pattern_80.png" %> 
     <% elsif discover_email.subscription.clearbit_logo_url.include? "http://logo.clearbit.com/"%> 
     <%  logo_safe = discover_email.subscription.clearbit_logo_url %> 
     <% else %> 
     <%  logo_safe = "http://logo.clearbit.com/" + discover_email.subscription.clearbit_logo_url %> 
     <% end %> 

     <% subject = discover_email.fit_subject %> 

     <div id="recommendation-<%= index + 1 %>" style="height: 110px; width: 320px;"> 
      <% unless index == 0 %> 
      <div class="left-line" > 
      <% end %> 
      <div class="up-next-cell"> 
      <div class="row"> 
       <div class="discover-up-next-cell-text col-xs-8" style="padding: 0 0 0 10px; text-align: left;"> 
       <%= link_to subject, discover_show_path(message_id: discover_email.message_id), class: "up-next-cell-subject" %> 
       <div class="row" style="margin-top: 5px;"> 
        <div class="gallery_card_logo col-sm-2 col-xs-3 no-padding" style="width: 20px !important; margin-right: 5px;"> 
        <%= image_tag(logo_safe, style: "width: 20px; height: 20px; float: left;") %> 
        </div> 
        <div class="col-xs-9 no-padding"> 
        <p class="discover-up-next-senders-name"><%= discover_email.senders_name %></p> 
        </div> 
       </div> 
       </div> 

       <div class="col-xs-4 no-padding"> 
       <%= link_to(image_tag(discover_email.image_url, class: "discover-email-up-next-cell-image"), discover_show_path(message_id: discover_email.message_id)) %> 
       </div> 
      </div> 
      </div> 
      <% unless index == 0 %> 
      </div> 
      <% end %> 
     </div> 
     <% end %> 
    </div> 
    </div> 
</div> 
</body> 

答えて

0

JavaScriptの/アヤックスとルビーのコンボでこれを解決しました。 AJAXによって呼び出さ

アヤックス

<script type="text/javascript"> 
    #use ajax to call controller action AFTER page finishes loading 
    $(window).load(function(){ 
    $.ajax({ 
     url: "/discover/up_next", 
     cache: false, 
     data: {"random": "data"}, 
     success: function(html){ 
     $("#discover-up-next-container").append(html); 
     } 
    }); 
    }); 
</script> 

ルビーコントローラのアクション

def up_next 
    wait = Wait.new 
    @up_next = #get up next content 

    #wait until content is ready to load html 
    wait.until { @up_next.empty? == false } 
    render layout: false 
end 
関連する問題