Rails 3 - 在第一页视图上无法正确呈现图像

Question

在我的 rails3 应用程序中，我有一个图片库，其中：

gallery has many images
image belongs to gallery

我正在使用载波将图像上传到 S3。

我的图库页面（“显示”操作）显示该图库中每个图像的缩略图。

当用户点击缩略图时，我使用颜色框以模态方式显示图像。

我经常在点击图片后看到这个：

我想看到的是这样的：

我做了很多故障排除：

• 尝试使用 FancyBox 而不是 ColorBox - 同样的问题
• 尝试使用不同的 CarrierWave 分支 - 相同的问题
• 尝试将我的图像放入欧洲存储桶（我在欧洲） - 同样的问题
• 尝试将我的图片与图库一起加载 - 同样的问题
• 尝试使用 Google Hosted jQuery 1.4.1 和 1.4.3 - 同样的问题
• 已将所有内容上传到 Heroku - 同样的问题
• 尝试显式设置我的颜色框（以及其他各种内容 div）的宽度
• 为 S3 存储桶编辑了 ACL
• 对 images.html.haml 使用 html5 doctype（图像控制器的布局）

这往往是我第一次点击缩略图时上传后虽然我注意到它发生在我没有点击过的图片上一个小时左右。如果我在失败后立即再次单击缩略图，问题就会消失......我从来没有遇到任何缩略图问题，它们都可以正常加载。似乎第一次尝试时没有下载图像的大（原始）版本。

• 我的日志中没有错误。
• 这让我非常抓狂。
• 我正在使用 Fog gem 版本 0.3.13。

我还能在这里做什么？我还可以尝试哪些故障排除？任何帮助，将不胜感激。

这是我的一些代码：

class Image < ActiveRecord::Base
  belongs_to :gallery
  mount_uploader :photo, ImageUploader
  attr_accessible :photo, :gallery_id
  validates_presence_of :photo
end

class Gallery < ActiveRecord::Base
  default_scope order("id DESC")
  has_many :images
  attr_accessible :name, :images_attributes, :description
  accepts_nested_attributes_for :images, :reject_if => :all_blank, :allow_destroy => true
  validates_presence_of :name
end

#images/show.html.haml
= image_tag @image.photo_url if @image.photo_url

#galleries/show.html.haml
- for image in gallery.images
  .image
    = link_to image_tag(image.photo_url(:thumb)), image_path(image), :name=>"modal", :class=>"group" if image.photo_url(:thumb)

#layouts/images.html.haml
!!! 5
%html
  %body
    #image
      = yield

Answer 1

我怀疑您的问题与 CSS 而不是应用程序本身有关。第一次加载图像时，浏览器将不知道它的宽度或高度，因此它以任意且通常错误的大小进入。后续请求将非常快速地从缓存中加载图像，可能在 JavaScript 有机会运行之前，这意味着宽度和高度属性已正确填充。

您可以通过将宽度和高度属性放入发送到客户端的 HTML 中来解决此问题。 Paperclip 等附件系统允许您提取和保存这些信息，但默认情况下不这样做。