Rails 3 + turbolinks + Mozilla 的砌体图像重叠问题

【问题标题】：Masonry images overlapping issue with rails 3 + turbolinks + MozillaRails 3 + turbolinks + Mozilla 的砌体图像重叠问题
【发布时间】：2013-01-10 14:15:10
【问题描述】：

我有一个带有 masonry 和 rails 3 和 turbolinks 的新网站。

该网站在除 mozilla firefox 之外的所有浏览器上都能正常运行。

图像在 mozilla firefox 上重叠/叠加，但在其他浏览器上该网站工作正常。

在谷歌浏览器上使用 turbolinks 可以正常工作。

如何使用 Mozilla firefox 解决这个问题？

【问题讨论】：

您是否要等到 JS 说所有图像都已加载后才触发 masonry 调用？

标签： jquery ruby-on-rails ruby-on-rails-3 jquery-masonry turbolinks

【解决方案1】：

谢谢，几个小时后，我用新的砌体代码解决了这个问题，因为$('#page').masonry('reload');

我进入控制台：

cannot call methods on masonry prior to initialization; attempted to call method 'reload'

所以，对我有用的最后一个是新的砌体代码：

$(document).on('page:load', function(){
   $('#page').waitForImages(function(){
    finished: function() {
      var $container;
      $container = $("#page");
      $container.imagesLoaded(function() {
       return $container.masonry({
       .
       .
       //options here
       });
     });
   }, 
   waitForAll: true
 });
});

您可以在此处下载缩小的 waitForImages 插件：

https://raw.github.com/alexanderdickson/waitForImages/master/dist/jquery.waitforimages.min.js

这是 waitForImages 页面：

https://github.com/alexanderdickson/waitForImages

【讨论】：