load small-res images initially in small frames and load full res asynchronously to cut down on inital network time. this should make masonry do its thing faster. [ci skip]

app/assets/javascripts/app/views/post/small_frame.js

@@ -35,6 +35,28 @@ app.views.Post.SmallFrame = app.views.Post.extend({
 
   postRenderTemplate : function() {
     this.addStylingClasses()
+    this.loadHighResImage()
+  },
+
+  /* preload high-res images; small res are loaded initially in the template
+   * to help with initial load times (see: facebook mobile, soundcloud's new desktop webapp, etc) */
+  loadHighResImage : function() {
+    if(this.model.get("photos").length == 0) { return }
+    var self = this;
+
+    _.each(this.$("img[data-preload=true]"), function(element){
+
+      /* compensate for multiple photo postings */
+      _.find(self.model.get("photos"), function(photo){
+        if(photo.guid == $(element).attr("id")){
+
+          /* create a new image tag here and wait for the load() callback to switch */
+          $("<img>").attr({src : photo.sizes.large}).load(function(){
+            $(element).attr("src", photo.sizes.large)
+          })
+        }
+      })
+    })
   },
 
   addStylingClasses : function() {

app/assets/templates/small-frame/default.jst.hbs

@@ -2,7 +2,7 @@
     {{#if photos}}
         <div class="image-container">
             {{#each photos}}
-                <img src="{{sizes.large}}" {{#if ../../adjustedImageHeight}}style="height:{{../../adjustedImageHeight}}px;"{{/if}} />
+                <img src="{{sizes.small}}" {{#if ../../adjustedImageHeight}}style="height:{{../../adjustedImageHeight}}px;"{{/if}} data-preload=true id="{{guid}}" />
             {{/each}}
         </div>
     {{/if}}
@@ -10,7 +10,7 @@
     {{#if object_url}}
         <div class="image-container">
             <a href="{{object_url}}" class="stream-photo-link">
-                <img src="{{image_url}}" data-small-photo="{{image_url}}" data-full-photo="{{image_url}}" class="stream-photo" />
+                <img src="{{image_url}}" class="stream-photo" />
             </a>
         </div>
     {{/if}}