improved lazy loading card images

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -2864,3 +2864,10 @@ footer[role="contentinfo"]{
 
   }
 }
+
+
+img.lazy{
+  &.loading{
+    // background-color: red;
+  }
+}

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -66,10 +66,10 @@
       <figure
         v-for="(img, index) in item.images"
         :key="img.url"
+        class="lazy"
+        v-lazy="index"
       >
         <img
-          class="lazy"
-          v-lazy="index"
           :data-src="img.style_cardmedium_url"
           :title="img.title"
         />

web/themes/custom/materiotheme/vuejs/components/Content/CardThematique.vue

@@ -13,10 +13,10 @@
       <figure
         v-for="(img, index) in item.images"
         :key="img.url"
+        class="lazy"
+        v-lazy="index"
       >
         <img
-          class="lazy"
-          v-lazy="index"
           :data-src="img.style_cardmedium_url"
           :title="img.title"
         />

web/themes/custom/materiotheme/vuejs/components/Content/MiniCard.vue

@@ -35,10 +35,10 @@
       <figure
         v-for="(img, index) in item.images"
         :key="img.url"
+        v-lazy="index"
+        class="lazy"
       >
         <img
-          class="lazy"
-          v-lazy="index"
           :data-src="img.style_minicard.url"
           :title="img.title"
         />

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -261,10 +261,10 @@
       <figure
         v-for="(img, index) in material.images"
         :key="img.url"
+        class="lazy"
+        v-lazy="index"
       >
         <img
-          class="lazy"
-          v-lazy="index"
           :data-src="img.style_cardfull.url"
           :title="img.title"
         />

web/themes/custom/materiotheme/vuejs/components/cardMixins.js

@@ -2,13 +2,25 @@
 export default {
   directives: {
     lazy: {
-      bind (img, binding) {
-        // console.log('lazy bind', img, binding)
+      bind (figure, binding) {
+        // console.log('lazy bind', figure, binding)
         // show only the first image
         if (binding.value === 0) {
+          const img = figure.querySelector('img:not(.blank)')
+          figure.classList.add('loading')
+          img.addEventListener('load', function (e) {
+            console.log('img loaded', e)
+            figure.classList.remove('loading')
+            figure.classList.add('loaded')
+          })
+          img.addEventListener('error', function (e) {
+            console.error('img ERROR', e)
+            e.target.classList.remove('loading')
+            e.target.classList.add('error')
+          })
           img.setAttribute('src', img.getAttribute('data-src'))
-          img.removeAttribute('data-src')
-          img.classList.remove('lazy')
+          // img.removeAttribute('data-src')
+          // img.classList.remove('lazy')
         }
       }
     },
@@ -16,7 +28,7 @@ export default {
       inserted (el, binding) {
         // switch images on mousemove
         el.addEventListener('mousemove', function (event) {
-          const figs = this.querySelectorAll('figure')
+          const figs = this.querySelectorAll('figure.loaded')
           // console.log('mousemove', this, event, figs.length)
           // let len = figs.length
           // let w = this.clientWidth;
@@ -45,34 +57,59 @@ export default {
     console.log('card mounted', this.$options.name)
     // if (this.$options.name ==! 'ModalCard') {
     this.$el.addEventListener('mouseover', function (event) {
-      const imgs = this.querySelectorAll('.images figure img.lazy')
+      const figures = this.querySelectorAll('.images figure.lazy:not(.loaded):not(.loading)')
       // console.log('mousemove', this, imgs)
-      imgs.forEach((img) => {
+      figures.forEach((figure, index) => {
+        const img = figure.querySelector('img:not(.blank)')
         // console.log('forEach img',img)
-        img.setAttribute('src', img.getAttribute('data-src'))
-        img.removeAttribute('data-src')
-        img.classList.remove('lazy')
+        img.classList.add('loading')
+        img.addEventListener('load', function (e) {
+          // console.log('img loaded', e)
+          figure.classList.remove('loading')
+          figure.classList.add('loaded')
+        })
+        img.addEventListener('error', function (e) {
+          console.error('img ERROR', figure, e)
+        })
+        const src = img.getAttribute('data-src')
+
+        // for debug purpose
+        console.log(figures.length, index)
+        // let src = img.getAttribute('data-src')
+        // if (index > 0 && index < figures.length - 1) {
+        //   src = img.getAttribute('data-src').replace('?', '/bad?')
+        // }
+
+        img.setAttribute('src', src)
+        // img.removeAttribute('data-src')
+        // img.classList.remove('lazy')
       })
     }, { once: true })
     // }
-  },
-  methods: {
-    activateLazyLoad () {
-      console.log('card activateLazyLoad', this.$options.name)
-
-      this.$el.addEventListener('mousemove', function (event) {
-        const imgs = this.querySelectorAll('.images figure img.lazy')
-        // console.log('mousemove', this, imgs)
-        imgs.forEach((img) => {
-          // console.log('forEach img',img)
-          img.setAttribute('src', img.getAttribute('data-src'))
-          img.removeAttribute('data-src')
-          img.classList.remove('lazy')
-        })
-      }, { once: true })
-    }
-    // deg2rad (deg) {
-    //   return deg * (Math.PI / 180)
-    // },
   }
+  // ,
+  // methods: {
+  //   // not used
+  //   activateLazyLoad () {
+  //     console.log('card activateLazyLoad', this.$options.name)
+
+  //     this.$el.addEventListener('mousemove', function (event) {
+  //       const imgs = this.querySelectorAll('.images figure img.lazy')
+  //       // console.log('mousemove', this, imgs)
+  //       imgs.forEach((img) => {
+  //         // console.log('forEach img',img)
+  //         // img.classList.add('loading')
+  //         // img.onload = function (e) {
+  //         //   console.log('img loaded', e)
+  //         // }
+  //         img.setAttribute('src', img.getAttribute('data-src'))
+  //         img.removeAttribute('data-src')
+  //         img.classList.remove('lazy')
+  //       })
+  //     }, { once: true })
+  //   }
+  //   // deg2rad (deg) {
+  //   //   return deg * (Math.PI / 180)
+  //   // },
+  // }
 }