throttle hub loading for better perf

1 files changed, 95 insertions, 57 deletions

diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index e73e49a7..198113c8 100755
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -15,6 +15,7 @@ var HubView = ScrollableView.extend({
     this.$content = this.$(".content")
     this.$loader = this.$(".loader")
     this.scroller = new IScroll('#hub', app.iscroll_options)
+    HubLoader.init(this)
   },
 
   show: function(){
@@ -36,72 +37,75 @@ var HubView = ScrollableView.extend({
     }).sort(function(a,b){
       return a[0] > b[0] ? -1 : a[0] == b[0] ? 0 : 1
     }).map(function(pair){
-      console.log(pair[1])
+      // console.log(pair[1])
       return pair[1]
     })
     this.$loader.hide()
     this.$content.empty()
     this.galleries = {}
+    HubLoader.add(this.data)
+    
+    this.deferScrollToTop()
+  },
+  
+  append: function(row){
     // id date subtitle body link store image[uri caption]
-    this.data.forEach(function(row){
-      // console.log(row)
-      console.log(moment(row.date))
-      var t = this.template.replace(/{{id}}/g, row.id)
-                           .replace(/{{date}}/, moment(row.date).format("MM.DD.YYYY"))
-                           .replace(/{{title}}/, row.title)
-                           .replace(/{{subtitle}}/, row.subtitle)
-                           .replace(/{{link}}/, row.link)
-                           .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
-      var $t = $(t)
-      if (row.store != "true") {
-        $t.find(".store").remove()
-      }
-      this.$content.append($t)
-      
-      if (row.image.length > 1) {
-        // image gallery
-        var $gallery = $(".gallery-" + row.id)
-        row.image.forEach(function(img){
-          var el = document.createElement("div")
-          el.style.backgroundImage = "url(" + img.uri + ")"
-          el.className = "item"
-          $gallery.append(el)
-        })
-        this.galleries[row.id] = new Flickity( ".gallery-" + row.id, {
-          selector: '.item',
-          cellAlign: 'center',
-          autoPlay: false,
-          freeScroll: false,
-          wrapAround: true,
-          imagesLoaded: true,
-          prevNextButtons: false,
-          pageDots: false,
-          contain: true,
-          draggable: true,
-        })
-      }
-      else {
-        // single image
+    // console.log(row)
+    console.log(moment(row.date))
+    var t = this.template.replace(/{{id}}/g, row.id)
+                         .replace(/{{date}}/, moment(row.date).format("MM.DD.YYYY"))
+                         .replace(/{{title}}/, row.title)
+                         .replace(/{{subtitle}}/, row.subtitle)
+                         .replace(/{{link}}/, row.link)
+                         .replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
+    var $t = $(t)
+    if (row.store != "true") {
+      $t.find(".store").remove()
+    }
+    this.$content.append($t)
+    
+    if (row.image && row.image.length > 1) {
+      // image gallery
+      var $gallery = $(".gallery-" + row.id)
+      row.image.forEach(function(img){
         var el = document.createElement("div")
-        el.style.backgroundImage = "url(" + row.image[0].uri + ")"
+        el.style.backgroundImage = "url(" + img.uri + ")"
         el.className = "item"
-        $(".gallery-" + row.id).append(el)
-        $(".gallery-" + row.id).data("row", row)
-        
-        // video, append play button
-        if (row.link.match(/youtube|youtu.be|vimeo/)) {
-          var play = document.createElement("div")
-          play.className = "play"
-          $(".gallery-" + row.id).append(play)
-          $(".gallery-" + row.id).addClass("gallery-video-post")
-        }
-        $t.find(".gallery-left").remove()
-        $t.find(".gallery-right").remove()
+        $gallery.append(el)
+      })
+      this.galleries[row.id] = new Flickity( ".gallery-" + row.id, {
+        selector: '.item',
+        cellAlign: 'center',
+        autoPlay: false,
+        freeScroll: false,
+        wrapAround: true,
+        imagesLoaded: true,
+        prevNextButtons: false,
+        pageDots: false,
+        contain: true,
+        draggable: true,
+      })
+    }
+    else {
+      // single image
+      var el = document.createElement("div")
+      if (row.image && row.image.length) {
+        el.style.backgroundImage = "url(" + row.image[0].uri + ")"
       }
+      el.className = "item"
+      $(".gallery-" + row.id).append(el)
+      $(".gallery-" + row.id).data("row", row)
       
-    }.bind(this))
-    
-    this.deferScrollToTop()
+      // video, append play button
+      if (row.link.match(/youtube|youtu.be|vimeo/)) {
+        var play = document.createElement("div")
+        play.className = "play"
+        $(".gallery-" + row.id).append(play)
+        $(".gallery-" + row.id).addClass("gallery-video-post")
+      }
+      $t.find(".gallery-left").remove()
+      $t.find(".gallery-right").remove()
+    }
   },
   
   store_link: function(){
@@ -127,4 +131,38 @@ var HubView = ScrollableView.extend({
     window.plugins.socialsharing.share(title, null, null, "http://deeplink.me/www.stoneisland.com/hub" )
   },
 
-})
\ No newline at end of file
+})
+
+var HubLoader = (function(){
+  var queue, view, item, loader
+  var HubLoader = {}
+  var loader
+  HubLoader.init = function(v){
+    view = v
+  }
+  HubLoader.add = function(items){
+    queue = items
+    this.load()
+  }
+  HubLoader.load = function(){
+    item = queue.shift()
+    if (! item) return
+    if (item.image && item.image.length) {
+      loader = new Loader (HubLoader.build)
+      images = item.image.map(function(img){
+        return img.uri.replace("http:","https:")
+      }).filter(function(img){
+        return img.uri
+      })
+      loader.preloadImages(images)
+    }
+    else {
+      HubLoader.build()
+    }
+  }
+  HubLoader.build = function(){
+    view.append(item)
+    setTimeout(HubLoader.load, 20)
+  }
+  return HubLoader
+})()
\ No newline at end of file