slay reLayout suckage by reading

app/assets/javascripts/app/views/canvas_view.js

@@ -5,6 +5,7 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     this.postClass = app.views.SmallFrame
     this.setupInfiniteScroll()
     this.stream.bind("reLayout", this.reLayout, this)
+    this.stream.bind("fetched", this.triggerRelayoutAfterImagesLoaded, this)
   },
 
   renderTemplate : function() {
@@ -16,7 +17,6 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
     //needs to be deferred so it happens after html rendering finishes
     _.delay(_.bind(this.mason, this), 0)
 
-    this.triggerReLayouts()
   },
 
   addPostView : function(post) {
@@ -24,29 +24,27 @@ app.views.Canvas = app.views.Base.extend(_.extend({}, app.views.infiniteScrollMi
   },
 
   mason : function() {
-    this.$el.isotope({
+    var el = this.$el;
-      itemSelector : '.canvas-frame',
+    el.imagesLoaded(function(){
-      visibleStyle : {scale : 1},
+      el.isotope({
-      hiddenStyle : {scale : 0.001},
+        itemSelector : '.canvas-frame',
-      masonry : {
+        visibleStyle : {scale : 1},
-        columnWidth : 292.5
+        hiddenStyle : {scale : 0.001},
-      }
+        masonry : {
+          columnWidth : 292.5
+        }
+      })
+    })
+  },
+
+  triggerRelayoutAfterImagesLoaded : function(){
+    var self = this;
+    self.$el.imagesLoaded(function(){
+      self.reLayout()
     })
   },
 
   reLayout : function(){
     this.$el.isotope("reLayout")
-  },
-
-  triggerReLayouts : function(){
-    // Images load slowly, which setting the height of the dom elements, use these hax for the momment to reLayout the page
-    // ever little bit for a while after loading
-    // gross hax, bro ;-p
-
-    _.delay(_.bind(this.reLayout, this), 200)
-    _.delay(_.bind(this.reLayout, this), 500)
-    _.delay(_.bind(this.reLayout, this), 1000)
-    _.delay(_.bind(this.reLayout, this), 3000)
-    _.delay(_.bind(this.reLayout, this), 5000)
   }
 }));