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

Question

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

gallery has many images
image belongs to gallery

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

我的图库页面（'show'action）显示该图库中每个图像的缩略图。

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

很多时候，我在点击图片后看到了这一点：

我想看到的是：

我做了很多故障排除：

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

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

• 我的日志中没有错误。
• 这让我绝对坚持不懈。
• 我正在使用Fog gem version 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有机会运行之前，这意味着正确填充了width和height属性。

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