<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>