Lazyloading styles with CSS :has()

src/assets/css/_variables-lazyload.scss

@@ -4,10 +4,9 @@
 
 :root {
   // Lazy.
-  --vp-lazyload-images__background: linear-gradient(270deg, rgba(140, 140, 140, 15%), rgba(140, 140, 140, 5%));
-  --vp-lazyload-images__background-second: linear-gradient(90deg, rgba(140, 140, 140, 15%), rgba(140, 140, 140, 5%));
-  --vp-lazyload-images__animation-duration: 1.5s;
-  --vp-lazyload-images__animation-second-delay: 0.3s;
+  --vp-lazyload-images__background: linear-gradient(270deg, rgba(140, 140, 140, 15%), rgba(140, 140, 140, 5%), rgba(140, 140, 140, 5%), rgba(140, 140, 140, 15%));
+  --vp-lazyload-images__background-size: 400% 100%;
+  --vp-lazyload-images__animation-duration: 7s;
 
   // Transitions.
   --vp-lazyload-transition-duration: 0.3s;

src/assets/css/lazyload-fallback.scss

@@ -0,0 +1,32 @@
+/*
+ * Visual Portfolio Lazyload Images fallback for old browsers
+ * which does not support CSS :has()
+ */
+:is(.vp-portfolio__item-img, .vp-portfolio__thumbnail-img) {
+  // Extra check for lazy loading class on the inner image
+  // to make sure image will be lazy loaded by Visual Portfolio.
+  &:is(.vp-has-lazyload, .vp-has-lazyloading, .vp-has-lazyloaded)::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    // Fixed possible bug with inaccessible links on images in the Classic style.
+    pointer-events: none;
+    visibility: visible;
+    content: "";
+    background-image: var(--vp-lazyload-images__background);
+    background-size: var(--vp-lazyload-images__background-size);
+    opacity: 1;
+    transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
+  }
+
+  &:is(.vp-has-lazyloading)::before {
+    animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) linear infinite;
+  }
+
+  &:is(.vp-has-lazyloaded)::before {
+    visibility: hidden;
+    opacity: 0;
+  }
+}

src/assets/css/lazyload.scss

@@ -2,6 +2,8 @@
 
 /*
  * Visual Portfolio Lazyload Images
+ *
+ * - :first-of-type is used to prevent conflicts with hover image (Pro feature)
  */
 
 // LazyLoad image
@@ -17,52 +19,41 @@ img.vp-lazyloaded {
   opacity: 1;
 }
 
-.vp-portfolio__item-img::before,
-.vp-portfolio__thumbnail-img::before,
-.vp-portfolio__item-img::after,
-.vp-portfolio__thumbnail-img::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  // Fixed possible bug with inaccessible links on images in the Classic style.
-  pointer-events: none;
-  visibility: visible;
-  content: "";
-  background: var(--vp-lazyload-images__background);
-  opacity: 1;
-  transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
-}
-
-.vp-portfolio__item-img-lazyloading::before,
-.vp-portfolio__thumbnail-img-lazyloading::before,
-.vp-portfolio__item-img-lazyloading::after,
-.vp-portfolio__thumbnail-img-lazyloading::after {
-  animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) linear infinite;
-}
+:is(.vp-portfolio__item-img, .vp-portfolio__thumbnail-img) {
+  // Extra check for lazy loading class on the inner image
+  // to make sure image will be lazy loaded by Visual Portfolio.
+  &:has(img:first-of-type:is(.vp-lazyload, .vp-lazyloading, .vp-lazyloaded))::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    // Fixed possible bug with inaccessible links on images in the Classic style.
+    pointer-events: none;
+    visibility: visible;
+    content: "";
+    background-image: var(--vp-lazyload-images__background);
+    background-size: var(--vp-lazyload-images__background-size);
+    opacity: 1;
+    transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
+  }
 
-.vp-portfolio__item-img::before,
-.vp-portfolio__thumbnail-img::before {
-  background: var(--vp-lazyload-images__background-second);
-  animation-delay: var(--vp-lazyload-images__animation-second-delay);
-}
+  &:has(img:first-of-type.vp-lazyloading)::before {
+    animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) ease-in-out infinite;
+  }
 
-.vp-portfolio__item-img-lazyloaded::before,
-.vp-portfolio__thumbnail-img-lazyloaded::before,
-.vp-portfolio__item-img-lazyloaded::after,
-.vp-portfolio__thumbnail-img-lazyloaded::after {
-  visibility: hidden;
-  opacity: 0;
+  &:has(img:first-of-type.vp-lazyloaded)::before {
+    visibility: hidden;
+    opacity: 0;
+  }
 }
 
 @keyframes vp-lazyload-placeholder {
-  0%,
-  100% {
-    opacity: 1;
+  0% {
+    background-position: 200% 0;
   }
 
-  50% {
-    opacity: 0;
+  100% {
+    background-position: -200% 0;
   }
 }

src/assets/js/lazyload-fallback.js

@@ -0,0 +1,22 @@
+/*
+ * Visual Portfolio images lazy load fallback for browsers
+ * which does not support CSS :has()
+ */
+
+// Lazyloaded - remove preloader images placeholder effect.
+document.addEventListener('lazybeforeunveil', (e) => {
+  const vpfImgWrapper = e.target.closest('.vp-portfolio__item-img, .vp-portfolio__thumbnail-img');
+
+  if (vpfImgWrapper) {
+    vpfImgWrapper.classList.add('vp-has-lazyloading');
+  }
+});
+
+document.addEventListener('lazyloaded', (e) => {
+  const vpfImgWrapper = e.target.closest('.vp-portfolio__item-img, .vp-portfolio__thumbnail-img');
+
+  if (vpfImgWrapper) {
+    vpfImgWrapper.classList.add('vp-has-lazyloaded');
+    vpfImgWrapper.classList.add('vp-has-lazyloading');
+  }
+});

src/assets/js/lazyload.js

@@ -1,43 +1,30 @@
 /*
  * Visual Portfolio images lazy load.
  */
-const { jQuery: $ } = window;
 
-const $doc = $(document);
-
-// recalculate image size if parent is <picture>
-$doc.on('lazybeforesizes', (e) => {
+// Recalculate image size if parent is <picture>
+document.addEventListener('lazybeforesizes', (e) => {
   // for some reason sometimes e.detail is undefined, so we need to check it.
   if (!e.detail || !e.detail.width || !e.target) {
     return;
   }
 
-  e.detail.width = $(e.target).parents(':not(picture)').innerWidth() || e.detail.width;
-});
-
-// Lazyloaded - remove preloader images placeholder effect.
-$doc.on('lazybeforeunveil', (e) => {
-  const $img = $(e.target);
-
-  $img.closest('.vp-portfolio__item-img').addClass('vp-portfolio__item-img-lazyloading');
-  $img.closest('.vp-portfolio__thumbnail-img').addClass('vp-portfolio__thumbnail-img-lazyloading');
+  const parent = e.target.closest(':not(picture)');
 
-  /**
-   * Remove <noscript> tag.
-   * Some of optimization plugin make something, that killed our styles with noscript tag.
-   * Related topic: https://wordpress.org/support/topic/visual-portfolio-and-sg-optimizer-dont-play-well/
-   */
-  $img.prev('noscript').remove();
+  if (parent) {
+    e.detail.width = parent.clientWidth || e.detail.width;
+  }
 });
-$doc.on('lazyloaded', (e) => {
-  const $img = $(e.target);
 
-  $img
-    .closest('.vp-portfolio__item-img')
-    .removeClass('vp-portfolio__item-img-lazyloading')
-    .addClass('vp-portfolio__item-img-lazyloaded');
-  $img
-    .closest('.vp-portfolio__thumbnail-img')
-    .removeClass('vp-portfolio__thumbnail-img-lazyloading')
-    .addClass('vp-portfolio__thumbnail-img-lazyloaded');
+/**
+ * Remove <noscript> tag.
+ * Some of optimization plugin make something, that killed our styles with noscript tag.
+ * Related topic: https://wordpress.org/support/topic/visual-portfolio-and-sg-optimizer-dont-play-well/
+ */
+document.addEventListener('lazybeforeunveil', (e) => {
+  const prevEl = e.target.previousElementSibling;
+
+  if (prevEl && prevEl.matches('noscript')) {
+    prevEl.remove();
+  }
 });

src/classes/class-assets.php

@@ -360,6 +360,9 @@ public static function enqueue_lazyload_assets() {
 
         self::store_used_assets( 'visual-portfolio-lazyload', true, 'script' );
         self::store_used_assets( 'visual-portfolio-lazyload', true, 'style' );
+
+        // lazy load fallback.
+        add_action( 'wp_head', 'Visual_Portfolio_Assets::add_lazyload_fallback_script' );
     }
 
     /**
@@ -474,7 +477,6 @@ public function register_scripts() {
             'visual-portfolio-lazyload' => array(
                 'assets/js/lazyload.min.js',
                 array(
-                    'jquery',
                     'lazysizes',
                 ),
             ),
@@ -707,6 +709,34 @@ public function add_noscript_styles() {
         <?php
     }
 
+    /**
+     * Add fallback for lazyloading.
+     */
+    public static function add_lazyload_fallback_script() {
+        $css_url = visual_portfolio()->plugin_url . 'assets/css/lazyload-fallback.min.css?ver=@@plugin_version';
+        $js_url  = visual_portfolio()->plugin_url . 'assets/js/lazyload-fallback.min.js?ver=@@plugin_version';
+
+        ?>
+        <script>
+            (function(){
+                // Check if fallback is not necessary.
+                if ( CSS.supports('selector(:has(div))') ) {
+                    return;
+                }
+
+                var linkTag = document.createElement("link");
+                linkTag.setAttribute('rel', 'stylesheet');
+                linkTag.setAttribute('href', '<?php echo esc_url( $css_url ); ?>');
+                document.head.appendChild(linkTag);
+
+                var scriptTag = document.createElement("script");
+                scriptTag.setAttribute('src', '<?php echo esc_url( $js_url ); ?>');
+                document.head.appendChild(scriptTag);
+            }());
+        </script>
+        <?php
+    }
+
     /**
      * Parse shortcodes from content.
      */