在Rails 4应用程序上从S3加载多个图像:缓慢加载页面

Question

我有一个用户索引页面,只需列出用户并显示他们的头像(使用载波和雾上传到Amazon S3上):

应用程序/视图/用户/ index.html.erb

<% @users.each do |user| %>
    <% if ! user.avatar_url.nil? && user.avatar.file.exists? %>
        <div class=“avatar">
            <%= link_to (image_tag user.avatar_url.to_s), user %>
        </div>
    ...
    <% end %>   
<% end %>

配置/初始化/ carrierwave.rb

CarrierWave.configure do |config|
   config.fog_credentials = {
     :provider               => 'AWS',
     :aws_access_key_id      => ENV["AWS_ACCESS_KEY_ID"],
     :aws_secret_access_key  => ENV["AWS_SECRET_ACCESS_KEY"],
     :region                 => 'eu-west-1'                  # optional, defaults to 'us-east-1'
   }
   config.fog_directory  = ENV["AWS_S3_BUCKET"]                     # required
   config.fog_public     = true                                   # optional, defaults to true
end

在获取所有图像时,索引页面加载速度非常慢.

有没有办法加速页面加载,可能通过延迟加载和ajax请求？

感谢您的帮助和时间,对此新手问题感到抱歉.

ps我想补充一点,即使我加载用户个人资料页有时它也不会显示任何头像(在这种情况下,只有我重新加载页面头像才能正确显示)

Answer 1

由于您的图像存储在 S3 上，因此您无法真正控制图像加载的速度。一种选择是考虑使用 Amazon Cloudfront 来提供图像。

图像由浏览器异步加载，因此缓慢加载图像不会影响用户索引页面的加载速度。如果您的用户页面加载缓慢，您应该考虑缓存您的用户索引页面：请参阅http://guides.rubyonrails.org/caching_with_rails.html#fragment-caching了解更多信息。

一个例子是

<% @users.each do |user| %>
    <% cache(user) do %>
      <%= render user %>
    <% end %>  
<% end %>