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

_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');
+    });
+  }
+}