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 */ + $("").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}}
{{#each photos}} - + {{/each}}
{{/if}} @@ -10,7 +10,7 @@ {{#if object_url}}
- +
{{/if}}