77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<BackgroundImageLoader :image-url="imageUrls[activeIndex]"
|
||
|
|
@imageLoaded="handleImageLoaded"
|
||
|
|
>
|
||
|
|
<template slot="overlay">
|
||
|
|
<slot name="overlay"></slot>
|
||
|
|
</template>
|
||
|
|
</BackgroundImageLoader>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import imageLoader from '~/mixins/imageLoader.js'
|
||
|
|
import BackgroundImageLoader from '@/components/BackgroundImageLoader'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
BackgroundImageLoader,
|
||
|
|
},
|
||
|
|
|
||
|
|
mixins: [ imageLoader ],
|
||
|
|
|
||
|
|
props: {
|
||
|
|
imageUrls: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
|
||
|
|
activeIndex: {
|
||
|
|
type: Number,
|
||
|
|
required: false,
|
||
|
|
default () {
|
||
|
|
return 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
currentlyLoadingIndex: 1,
|
||
|
|
errorUrls: [],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted () {
|
||
|
|
if (this.imageUrls.length > 1) {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.preloadImage()
|
||
|
|
}, 100) // timeout so events get fired - don't know why that is yet TODO - investigate properly
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
preloadImage () {
|
||
|
|
this.loadImage(this.imageUrls[this.currentlyLoadingIndex])
|
||
|
|
.then(img => {
|
||
|
|
this.$emit('imageLoaded', img)
|
||
|
|
this.currentlyLoadingIndex++
|
||
|
|
if (this.currentlyLoadingIndex < this.imageUrls.length) {
|
||
|
|
this.preloadImage()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(err => {
|
||
|
|
// TODO handle error cases
|
||
|
|
console.log('imageloaded ERROR', err)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
handleImageLoaded () {
|
||
|
|
this.$emit('imageLoaded', this.imageUrls[this.activeIndex])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
</style>
|