bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improved lazy loading card images

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-07-12 12:50:40 +02:00
parent 7876386208
commit 1f8ae09838
19 changed files with 210 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
View File

@@ -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"
/>

4
web/themes/custom/materiotheme/vuejs/components/Content/CardThematique.vue
View File

@@ -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"
/>

4
web/themes/custom/materiotheme/vuejs/components/Content/MiniCard.vue
View File

@@ -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"
/>

4
web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue
View File

@@ -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"
/>

95
web/themes/custom/materiotheme/vuejs/components/cardMixins.js
View File

@@ -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)
// // },
// }
}