perf(core): replace lazysizes with browser-level lazy loading (#1267)

_javascript/modules/components/img-lazyload.js

@@ -1,27 +0,0 @@
-/**
- * Set up image lazy-load
- */
-
-function stopShimmer($node) {
-  $node.parent().removeClass('shimmer');
-}
-
-export function imgLazy() {
-  const $images = $('main img[data-src]');
-
-  if ($images.length <= 0) {
-    return;
-  }
-
-  /* Stop shimmer when image loaded */
-  document.addEventListener('lazyloaded', function (e) {
-    stopShimmer($(e.target));
-  });
-
-  /* Stop shimmer from cached images */
-  $images.each(function () {
-    if ($(this).hasClass('ls-is-cached')) {
-      stopShimmer($(this));
-    }
-  });
-}

_javascript/modules/components/img-loading.js

@@ -0,0 +1,31 @@
+/**
+ * Setting up image lazy loading and LQIP switching
+ */
+
+export function loadImg() {
+  const $images = $('main img[loading="lazy"]');
+  const $lqip = $('main img[data-lqip="true"]');
+
+  if ($images.length > 0) {
+    $images.on('load', function () {
+      /* Stop shimmer when image loaded */
+      $(this).parent().removeClass('shimmer');
+    });
+
+    $images.each(function () {
+      /* Images loaded from the browser cache do not trigger the 'load' event */
+      if ($(this).prop('complete')) {
+        $(this).parent().removeClass('shimmer');
+      }
+    });
+  }
+
+  if ($lqip.length > 0) {
+    $lqip.each(function () {
+      /* Switch LQIP with real image url */
+      const dataSrc = $(this).attr('data-src');
+      $(this).attr('src', encodeURI(dataSrc));
+      $(this).removeAttr('data-src data-lqip');
+    });
+  }
+}

_javascript/modules/plugins.js

@@ -1,6 +1,6 @@
 export { categoryCollapse } from './components/category-collapse';
 export { initClipboard } from './components/clipboard';
-export { imgLazy } from './components/img-lazyload';
+export { loadImg } from './components/img-loading';
 export { imgPopup } from './components/img-popup';
 export { initLocaleDatetime } from './components/locale-datetime';
 export { toc } from './components/toc';