feat(img): add image lazyloading

* https://dev.to/yashints/native-lazy-loading-is-landed-in-chrome-2kli
* https://github.com/mfranzke/loading-attribute-polyfill

scripts/cloudinary.js

@@ -38,11 +38,11 @@ hexo.extend.tag.register('cloudinary', (args) => {
                   (max-width: 768px) 768px,
                   800px"
             src="${cloudinary}w_768/${legacy}"
-            alt="${alt}">`
+            alt="${alt}" loading="lazy">`
 
   if (fileName.endsWith('.png') || fileName.endsWith('.webp')) {
     return `<a href="${original}">
-      <picture>
+      <picture><noscript>
       <source type="image/webp"
         srcset="${cloudinary}/c_limit,w_320/${modern} 320w,
               ${cloudinary}/c_limit,w_468/${modern} 468w,
@@ -53,9 +53,8 @@ hexo.extend.tag.register('cloudinary', (args) => {
               (max-width: 768px) 768px,
               800px">
       ${img}
-      </picture></a>`
+      </noscript></picture></a>`
   } else {
-    return `<a href="${original}">
-      ${img}</a>`
+    return `<a href="${original}"><noscript>${img}</noscript></a>`
   }
 })

themes/typing/layout/_partial/head.ejs

@@ -41,10 +41,15 @@
   <meta name="msapplication-config" content="/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">
   <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">
+
   <%/* Fallback function for SRI */%>
   <%- addJs('js/sri.min.js') %>
 
+  <%/* Polyfill for <img loading="lazy"> */%>
+  <%- addJs('/js/loading-attribute-polyfill.min.js') %>
+
   <%- addCss('css/typing.css') %>
+
   <% if (theme.icons) { %>
     <%- addCss({ href: 'https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.7/css/fork-awesome.min.css', 'data-sri-fallback': '/forkawesome/css/fork-awesome.min.css', integrity: 'sha384-mByhW6NjnxyShh67P9+fepUvYSd7Uz/qV6e2u4kA2Fi4ZkjXxIP2mRkyK9dwK24W', crossorigin: 'anonymous' }) %>
   <% } %>

themes/typing/source/js/loading-attribute-polyfill.min.js

@@ -0,0 +1,5 @@
+/*
+ * Loading attribute polyfill - https://github.com/mfranzke/loading-attribute-polyfill
+ * @license Copyright(c) 2019 by Maximilian Franzke
+ */
+!function(e,t){"use strict";var r,a,o={rootMargin:"256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]',loadingSupported:"loading"in HTMLImageElement.prototype&&"loading"in HTMLIFrameElement.prototype};"undefined"!=typeof NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(r=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),i(r)}})},o)),a="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()};var n="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";function i(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&(t=e.parentNode,(r=t.querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.dataset.lazySrcset&&(e.setAttribute("srcset",e.dataset.lazySrcset),delete e.dataset.lazySrcset)}),e.setAttribute("src",e.dataset.lazySrc),delete e.dataset.lazySrc}function d(){document.querySelectorAll("noscript."+e).forEach(function(e){var t=e.textContent||e.innerHTML;o.loadingSupported||(void 0===r?t=t.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):("picture"===e.parentNode.tagName.toLowerCase()&&(t=function(e){return'<source srcset="'+n+'" data-lazy-remove="true"></source>'+e}(t)),t=function(e){return e.replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+n+'" data-lazy-src=')}(t)));var a=document.createElement("div");for(a.innerHTML=t;a.firstChild;)o.loadingSupported||void 0===r||!a.firstChild.tagName||"img"!==a.firstChild.tagName.toLowerCase()&&"iframe"!==a.firstChild.tagName.toLowerCase()||r.observe(a.firstChild),e.parentNode.insertBefore(a.firstChild,e);e.parentNode.removeChild(e)}),window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(o.lazyImage+"[data-lazy-src],"+o.lazyIframe+"[data-lazy-src]").forEach(function(e){i(e)})})}/comp|inter/.test(document.readyState)?a(d):"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){a(d)}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&d()})}("loading-lazy");