removed background preloader on mobile

TODO.md

@@ -14,6 +14,9 @@
 ## Image viewer
 * close icon
 
+## Services
+* background image for mobile
+
 ## Maybes
 * gallery page - featured images in same style as on services page with the
                  diagonal divide

pages/services.vue

@@ -1,13 +1,18 @@
 <template>
   <ContentPage heading="My Services">
     <!-- TODO need to disable this if on mobile -->
-    <BackgroundImagePreloader slot="background"
+    <BackgroundImagePreloader v-if="showPreloaderBackground" slot="background"
                               class="background-preloader"
                               :image-urls="backgroundImageUrls"
                               :active-index="activeIndex"
     >
-      <div slot="overlay" class="background-tint background preloader-overlay"></div>
     </BackgroundImagePreloader>
+    <BackgroundImageLoader v-else slot="background"
+                           class="background"
+                           image-url="https://via.placeholder.com/1920x1080"
+    >
+    </BackgroundImageLoader>
+    <div slot="overlay" class="background-tint background preloader-overlay"></div>
 
     <ul class="services-list">
       <li v-for="(service, index) in services"
@@ -35,6 +40,7 @@
 <script>
 import ContentPage from '@/components/ContentPage'
 import BackgroundImagePreloader from '@/components/BackgroundImagePreloader'
+import BackgroundImageLoader from '@/components/BackgroundImageLoader'
 
 export default {
   name: 'HomePage',
@@ -42,10 +48,12 @@ export default {
   components: {
     ContentPage,
     BackgroundImagePreloader,
+    BackgroundImageLoader,
   },
 
   data() {
     return {
+      showPreloaderBackground: false,
       activeIndex: 0,
       services: [
         {
@@ -86,6 +94,11 @@ export default {
     },
   },
 
+  mounted () {
+    const mq = window.matchMedia("(min-width: 40em)")
+    this.showPreloaderBackground = mq.matches
+  },
+
   methods: {
     handleMouseOver(index) {
       this.activeIndex = index