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