feat: add shimmer background when image loads

_javascript/utils/img-extra.js

@@ -1,26 +1,13 @@
 /**
- Set up image popup stuff (https://github.com/dimsemenov/Magnific-Popup)
+ * Set up image stuff
  */
 
-$(function () {
-    const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
-
-    if ($(`${IMG_SCOPE} img`).length <= 0) {
+(function() {
+    if ($('#core-wrapper img[data-src]') <= 0) {
         return;
     }
 
-    /* popup */
-
-    $(`${IMG_SCOPE} p > img[data-src], ${IMG_SCOPE} img[data-src].preview-img`).each(
-        function () {
-            let nextTag = $(this).next();
-            const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : '';
-            const src = $(this).attr('data-src'); // created by lozad.js
-
-            $(this).wrap(`<a href="${src}" title="${title}" class="popup"></a>`);
-        }
-    );
-
+    /* See: <https://github.com/dimsemenov/Magnific-Popup> */
     $('.popup').magnificPopup({
         type: 'image',
         closeOnContentClick: true,
@@ -32,8 +19,10 @@ $(function () {
         }
     });
 
-    /* markup the image links */
+    /* Stop shimmer when image loaded */
+    document.addEventListener('lazyloaded', function(e) {
+        const $img = $(e.target);
+        $img.parent().removeClass('shimmer');
+    });
 
-    $(`${IMG_SCOPE} a`).has('img').addClass('img-link');
-
-});
+})();