Merge pull request #273 from phanan/revamp

Lazy load the GitHub badges

app/site/src/App.vue

@@ -35,12 +35,15 @@
 
 <script>
 import _ from 'lodash'
+import Blazy from 'blazy'
 import { event } from './utils'
 import group from './components/Group.vue'
 import explore from './components/Explore.vue'
 import mainHeader from './components/Header.vue'
 import mainFooter from './components/Footer.vue'
 
+let blazy = null
+
 export default {
   components: { group, explore, mainHeader, mainFooter },
 
@@ -63,8 +66,15 @@ export default {
 
       this.debounceFilter()
     })
+  },
 
-    // Also, upon page load, tf there's a hash, we filter the awesome list
+  mounted() {
+    // Register lazyloading for the GitHub badges
+    blazy = new Blazy({
+      container: '.right'
+    })
+
+    // Also, upon page load, if there's a hash, we filter the awesome list
     // right away.
     if (window.location.hash) {
       this.q = /^#(.*)/.exec(window.location.hash)[1].toLowerCase()
@@ -92,6 +102,11 @@ export default {
       }
 
       this.groups = this.filter(_.cloneDeep(window.data), q)
+
+      // Force Blazy to revalidate the images for lazy loading
+      this.$nextTick(() => {
+        blazy.revalidate()
+      })
     }, 100),
 
     /**

app/site/src/components/Item.vue

@@ -8,7 +8,9 @@
         <template v-else>{{ item.author.name }}</template>
       </span>
       <a v-if="githubBadgeUrl" :href="item.url" class="github-badge">
-        <img :src="githubBadgeUrl">
+        <img class="b-lazy"
+          src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
+          :data-src="githubBadgeUrl">
       </a>
     </h1>
     <div class="thin" v-if="item.description" v-html="item.description"></div>

package.json

@@ -16,6 +16,7 @@
     "babel-core": "^6.0.0",
     "babel-loader": "^6.0.0",
     "babel-preset-es2015": "^6.0.0",
+    "blazy": "^1.6.2",
     "chalk": "^1.1.3",
     "copy-webpack-plugin": "^3.0.1",
     "cross-env": "^1.0.6",