From 6d038d6225f236fc4edd4ca56353a3a079cdea2b Mon Sep 17 00:00:00 2001
From: danielgrippi <danielgrippi@gmail.com>
Date: Mon, 28 May 2012 21:40:45 -0700
Subject: [PATCH] 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]

---
 .../javascripts/app/views/post/small_frame.js | 22 +++++++++++++++++++
 .../templates/small-frame/default.jst.hbs     |  4 ++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/app/views/post/small_frame.js b/app/assets/javascripts/app/views/post/small_frame.js
index fe847d45d..a304113ea 100644
--- a/app/assets/javascripts/app/views/post/small_frame.js
+++ b/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() {
diff --git a/app/assets/templates/small-frame/default.jst.hbs b/app/assets/templates/small-frame/default.jst.hbs
index f1da9f9c5..ac8dff752 100644
--- a/app/assets/templates/small-frame/default.jst.hbs
+++ b/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}}