feat: 🎸 Lazy image loading

Add Lozad lazy image loading library script to layout template, and activate it on all image tags.\n TODO: write plugin for MarkdownIt to use 'data-src' instead of src automatically to load them lazily, add a <noscript> version of the image with the standard 'src' attribute (since JavaScript will not load the images in this case and we want search engines to crawl the image without JavaScript, and create script that will use the <picture> tag with multiple image sizes and the 'data-src' and 'data-alt' attributes so the images will be loaded based on the screen size for faster performance.
seanWLawrence · Aug 22, 2018 · aad9601 · aad9601
1 parent 161f14b
commit aad9601
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 4 deletions.
diff --git a/bin/generator.js b/bin/generator.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,19 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "lozad": "^1.6.0",
     "markdown-it": "^8.4.2",
+    "markdown-it-anchor": "^5.0.2",
+    "markdown-it-attrs": "^2.3.1",
+    "markdown-it-center-text": "^1.0.4",
+    "markdown-it-front-matter": "^0.1.2",
+    "markdown-it-header-sections": "^1.0.0",
+    "markdown-it-lozad": "^0.2.0",
+    "markdown-it-replace-link": "^1.0.1",
+    "markdown-it-responsive": "^0.1.0",
+    "markdown-it-smartarrows": "^1.0.1",
+    "markdown-it-toc-done-right": "^2.0.3",
+    "mdfigcaption": "^0.1.1",
     "mustache": "^2.3.2"
   },
   "devDependencies": {

diff --git a/public/index.html b/public/index.html
@@ -4,8 +4,30 @@
   </head>
 
   <body>
-    <h1>Hello, world</h1>
+    <section id="hello%2C-world">
+<h1>Hello, world</h1>
 <p>Wow, this is my first Node tempate with Markdown! It's so easy to use and write with!</p>
+</section>
+    <script type="text/javascript">
+      // Check if browser supports InspectionObserver
+      // If yes, do nothing. If not, create script element and load the polyfill
+      // Added to support Lozad script for lazy image loading
+
+      if (!('IntersectionObserver' in window)) {
+        var script = document.createElement("script");
+        script.src = "https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver";
+        document.getElementsByTagName('head')[0].appendChild(script);
+      }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/lozad">
+      // Lozad lazy image loading source
+    </script>
+    <script>
+      // Get all image tags and run Lozad lazy loading on them
+      var images = document.querySelectorAll('img')
+      var observer = lozad(images);
+      observer.observe();
+    </script>
   </body>
 
 </html>
diff --git a/src/generator.js b/src/generator.js
@@ -85,7 +85,46 @@ function renderMarkdown(markdown) {
    * @external markdown-it {@link https://github.com/markdown-it/markdown-it#simple|MarkdownIt}
    */
 
-  return new MarkdownIt().render(markdown).trim();
+  return (
+    new MarkdownIt({ html: true })
+      .use(require('markdown-it-anchor'))
+      .use(require('markdown-it-attrs'))
+      .use(require('markdown-it-smartarrows'))
+      .use(require('markdown-it-header-sections'))
+      .use(require('markdown-it-toc-done-right'))
+      .use(require('markdown-it-center-text'))
+      .use(require('markdown-it-replace-link'))
+      .use(require('markdown-it-lozad'))
+      .use(require('markdown-it-front-matter'), (frontmatter) => {
+        console.log(frontmatter);
+      })
+      .use(require('mdfigcaption'))
+      // .use(require('markdown-it-responsive'), {
+      //   responsive: {
+      //     srcset: {
+      //       'post-*': [
+      //         {
+      //           width: 320,
+      //           rename: {
+      //             suffix: '-small',
+      //           },
+      //         },
+      //         {
+      //           width: 600,
+      //           rename: {
+      //             suffix: '-medium',
+      //           },
+      //         },
+      //       ],
+      //     },
+      //     sizes: {
+      //       'post-*': '(min-width: 36em) 33.3vw, 100vw',
+      //     },
+      //   },
+      // })
+      .render(markdown)
+      .trim()
+  );
 }
 
 /**
@@ -100,7 +139,11 @@ function renderLayout(html) {
    * @type {HTML}
    */
 
-  return template(layout, { title: 'Demo site', html });
+  return template(layout, {
+    title: 'Demo site',
+    html,
+    lozad: require('lozad').toString(),
+  });
 }
 
 /**

diff --git a/src/templates/layout.mustache b/src/templates/layout.mustache
@@ -5,6 +5,26 @@
 
   <body>
     {{{html}}}
+    <script type="text/javascript">
+      // Check if browser supports InspectionObserver
+      // If yes, do nothing. If not, create script element and load the polyfill
+      // Added to support Lozad script for lazy image loading
+
+      if (!('IntersectionObserver' in window)) {
+        var script = document.createElement("script");
+        script.src = "https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver";
+        document.getElementsByTagName('head')[0].appendChild(script);
+      }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/lozad">
+      // Lozad lazy image loading source
+    </script>
+    <script>
+      // Get all image tags and run Lozad lazy loading on them
+      var images = document.querySelectorAll('img')
+      var observer = lozad(images);
+      observer.observe();
+    </script>
   </body>
 
 </html>