Lazyload the GitHub badges

An Phan · An Phan · commit 2e4fb256d1aa · 2016-06-24T13:55:32.000+08:00
diff --git a/app/site/src/App.vue b/app/site/src/App.vue
@@ -35,6 +35,7 @@
 
 <script>
 import _ from 'lodash'
+import Blazy from 'blazy'
 import { event } from './utils'
 import group from './components/Group.vue'
 import explore from './components/Explore.vue'
@@ -72,6 +73,13 @@ export default {
     }
   },
 
+  mounted() {
+    // Register lazyloading for the GitHub badges
+    const blazy = new Blazy({
+      container: '.right'
+    })
+  },
+
   methods: {
     /**
      * Limit filtering using lodash's debounce.
diff --git a/app/site/src/components/Item.vue b/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>
diff --git a/package.json b/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",
