backgroundimagepreloader implemented

components/BackgroundImageLoader.vue

@@ -16,6 +16,8 @@
         >
         </div>
       </transition>
+      <slot name="overlay">
+      </slot>
     </div>
   </div>
 </template>

components/BackgroundImagePreloader.vue

@@ -0,0 +1,75 @@
+<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) {
+      this.preloadImage()
+    }
+  },
+
+  methods: {
+    preloadImage () {
+      this.loadImage(this.imageUrls[this.currentlyLoadingIndex])
+        .then(img => {
+          this.$emit('imageLoaded', img.src)
+          console.log('imageloaded', img)
+          this.currentlyLoadingIndex++
+          if (this.currentlyLoadingIndex < this.imageUrls.length) {
+            this.preloadImage()
+          }
+        })
+        .catch(err => {
+          // TODO handle error cases
+          console.log('imageloaded ERROR', img.src)
+        })
+    },
+
+    handleImageLoaded (img) {
+      this.$emit('imageLoaded handler', img.src)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/services.vue

@@ -1,10 +1,20 @@
 <template>
   <ContentPage heading="The Services Page Heading">
+    <!-- TODO need to disable this if on mobile -->
+    <BackgroundImagePreloader slot="background"
+                              class="background-preloader"
+                              :image-urls="backgroundImageUrls"
+                              :active-index="activeIndex"
+    >
+      <div slot="overlay" class="background preloader-overlay"></div>
+    </BackgroundImagePreloader>
+
     <ul class="services-list">
       <li v-for="(service, index) in services"
           :key="index"
           class="services-list__item"
           :style="{ 'z-index': services.length - index + 1}"
+          @mouseover="handleMouseOver(index)"
       >
         <div class="background background-image"
              :style="{ 'background-image': `url(${service.imageUrl})` }"
@@ -24,44 +34,67 @@
 
 <script>
 import ContentPage from '@/components/ContentPage'
+import BackgroundImagePreloader from '@/components/BackgroundImagePreloader'
 
 export default {
   name: 'HomePage',
 
   components: {
-    ContentPage
+    ContentPage,
+    BackgroundImagePreloader,
   },
 
   data() {
     return {
+      activeIndex: 0,
       services: [
         {
           'heading': 'Portraits',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
+          'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
           'html': '<p>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>',
           'linkUrl': '#',
         },
         {
           'heading': 'Dance',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
+          'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
           'html': '<p>Photography and video production of dancers and performances for print, web, and promotion.</p>',
           'linkUrl': '#',
         },
         {
           'heading': 'Music',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
+          'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
           'html': '<p>Photography and video of musical performances and portraits for print and the web, CD covers, and publicity photos.</p>',
           'linkUrl': '#',
         },
         {
           'heading': 'Events',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
+          'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
           'html': '<p>Photography and video production for your corporate, organisational and personal events and celebrations.</p>',
           'linkUrl': '#',
         },
       ]
     }
-  }
+  },
+
+  computed: {
+    backgroundImageUrls () {
+      return this.services.map(el => el.backgroundImageUrl)
+    },
+  },
+
+  methods: {
+    handleMouseOver(index) {
+      // TOOD this needs to only change if the transition has finished
+      // need to emit transitionend events on the background loaders
+      // and listen for them.
+      // if waiting for an transitionend event ignore the mouseover event
+      this.activeIndex = index
+    },
+  },
 }
 </script>
 
@@ -212,7 +245,11 @@ export default {
   @include font-title();
   color: $color__neutral-900;
   font-size: 2.0em;
-  // text-transform: uppercase;
+}
+
+.preloader-overlay {
+  z-index: 10;
+  background-color: rgba($color__primary-100, .7);
 }
 </style>