Question

我有一个看起来像这样的简单视图：

%h1 Charts

= high_chart "chart1", @chart1

h1和框架的其余部分需要200ms来加载并且非常静态。但是，由于控制器进行了大量计算，因此加载图表需要10秒以上的时间。因此，整个网页需要10秒才能加载，因为它正在等待图表计算完成。

如何加载网页的其余部分，减去图表，并在用户看到网页的其余部分时等待图表加载？

Answer 1

其中一个解决方案是将high_chart部分提取到单独的视图中并使用ajax加载它。所以你的观点看起来像：

%h1 Charts
#highCharts

然后假设你制作＆＃39; / high_charts＆＃39;要返回high_charts部分，您可以在页面加载后立即向/ high_charts发出ajax请求，并在获得响应时将其添加到#highCharts div：

$(function() {
  $.ajax({
    type: 'GET',
    url: '/high_charts',
    success: function(response) {
      $('#highCharts').prepend(response);
      // Initialize high_charts if needed
    }
  });
});

Answer 2

使用Jquery lazy loading。在您的视图中，为h1和除chart之外的所有其他部分编写代码。在图表控制器中，创建一个方法来渲染应该呈现图表的特定部分。

class ChartsController
  def show_chart
    render 'chart_file',layout: false
  end
end

添加Jquery脚本，如下所示

$(document).ready(function()
{  $.ajax({
    url: '/chart_controller/show_chart',
    data: {},
    success:function(data){
      $("#chart_div").append(data);
    }
  });
}

所以，首先，这将使用最少的内容加载rails视图，然后它将使用Ajax获取图表，因此它将是非侵入式的。

对控制器和视图代码进行必要的更改以便工作。

资源，

http://guides.rubyonrails.org/layouts_and_rendering.html

https://api.jquery.com/ready/

如何立即加载视图的一部分并延迟Rails中的其他部分？

2 个答案: