Add lazy loading

sebastienbarre · sebastienbarre · commit a322740695cc · 2016-12-11T14:18:08.000-05:00
diff --git a/js/lazysizes.min.js b/js/lazysizes.min.js
diff --git a/js/ls.unveilhooks.min.js b/js/ls.unveilhooks.min.js
diff --git a/package.json b/package.json
@@ -24,7 +24,10 @@
     "doc:images": "watch 'node src/modules/images.js' src/templates/docs/images",
     "doc:bgsize": "watch 'node src/modules/background-size.js' src/templates/docs/background-size",
     "build:all": "node build.js && bash script.sh",
-    "cson": "node src/components-cson-build.js"
+    "cson": "node src/components-cson-build.js",
+    "copy:lazysizes": "cp node_modules/lazysizes/lazysizes.min.js js/",
+    "copy:lazysizes:plugins": "cp node_modules/lazysizes/plugins/unveilhooks/ls.unveilhooks.min.js js/",
+    "postinstall": "npm run copy:lazysizes && npm run copy:lazysizes:plugins"
   },
   "repository": "tachyons-css/tachyons-css.github.io",
   "author": "mrmrs",
@@ -40,6 +43,7 @@
     "imagemin": "^5.2.2",
     "imagemin-mozjpeg": "^6.0.0",
     "jimp": "^0.2.27",
+    "lazysizes": "^3.0.0-rc2",
     "nightmare": "^2.8.1",
     "pretty-hrtime": "^1.0.3",
     "tachyons-background-size": "^5.0.3",
diff --git a/src/components-build-defaults.js b/src/components-build-defaults.js
@@ -25,4 +25,5 @@ module.exports = {
   headerTemplatePath: 'src/templates/header.html',
   headTemplatePath: 'src/templates/head.html',
   highlightTemplatePath: 'src/templates/highlight.html',
+  lazysizesTemplate: 'src/templates/lazysizes.html',
 };
diff --git a/src/components-build-index.js b/src/components-build-index.js
@@ -78,15 +78,17 @@ module.exports = _options => new Promise((resolve, reject) => {
     const footer = fs.readFileSync(options.footerTemplatePath, 'utf8');
     const head = fs.readFileSync(options.headTemplatePath, 'utf8');
     const header = fs.readFileSync(options.headerTemplatePath, 'utf8');
-    const indexTemplate = fs.readFileSync(options.componentsIndexTemplatePath, 'utf8');
+    const componentsIndexTemplate = fs.readFileSync(options.componentsIndexTemplatePath, 'utf8');
+    const lazysizesTemplate = fs.readFileSync(options.lazysizesTemplate, 'utf8');
 
-    const compiledPage = _.template(indexTemplate)({
+    const compiledPage = _.template(componentsIndexTemplate)({
       componentsForNav,
       title: 'Components',
       analytics,
       footer,
       head,
       header,
+      lazysizesTemplate,
       options,
     });
     mkdirp.sync(path.dirname(options.componentsIndexPath));
diff --git a/src/templates/components-index.html b/src/templates/components-index.html
@@ -7,6 +7,9 @@
   <style type="text/css" media="screen">
     .transparent { color: transparent; }
   </style>
+  <%= lazysizesTemplate %>
+  <script src="/js/ls.unveilhooks.min.js" async=""></script>
+  <script src="/js/lazysizes.min.js" async=""></script>
 </head>
 <body class="w-100 sans-serif">
   <%= header %>
@@ -32,8 +35,9 @@ <h1 class="f6 fw6 pb2 bb b--black-10 black-70 ttc"><%= category %></h1>
                href="<%= componentForNav.href %>"
                title="<%= componentForNav.name %>">
               <div class="ba b--dashed b--black-20 aspect-ratio aspect-ratio--<%= options.screenshotAspectRatio %>">
-                <div class="aspect-ratio--object"
-                     style="background:url(<%= componentForNav.screenshot.href %>) no-repeat <%= componentForNav.frontMatter.screenshot && componentForNav.frontMatter.screenshot['background-position'] || 'center center' %>/<%= componentForNav.frontMatter.screenshot && componentForNav.frontMatter.screenshot['background-size'] || 'cover' %>;"></div>
+                <div class="aspect-ratio--object lazyload"
+                     data-bg="<%= componentForNav.screenshot.href %>"
+                     style="background-repeat: no-repeat; background-position: <%= componentForNav.frontMatter.screenshot && componentForNav.frontMatter.screenshot['background-position'] || 'center center' %>; background-size: <%= componentForNav.frontMatter.screenshot && componentForNav.frontMatter.screenshot['background-size'] || 'cover' %>;"></div>
               </div>
               <p class="f5 tc">
                 <%= componentForNav.name %>
diff --git a/src/templates/lazysizes.html b/src/templates/lazysizes.html
@@ -0,0 +1,12 @@
+<style type="text/css" media="screen">
+/* https://github.com/aFarkas/lazysizes#css-api */
+.lazyload {
+    opacity: 0;
+}
+
+.lazyloading {
+    opacity: 1;
+    transition: opacity 300ms;
+    background-color: #eee;
+}
+</style>
