From cdcfcc1e9774ac5c376db9219a19121363cbd829 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Tue, 12 Dec 2017 23:49:54 +0100
Subject: [PATCH] Fixed #41: lazyload track and album images

---
 front/package.json                         | 1 +
 front/src/components/audio/album/Card.vue  | 2 +-
 front/src/components/audio/track/Table.vue | 2 +-
 front/src/main.js                          | 2 ++
 4 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/front/package.json b/front/package.json
index cc6869267..bad90430f 100644
--- a/front/package.json
+++ b/front/package.json
@@ -19,6 +19,7 @@
     "lodash": "^4.17.4",
     "semantic-ui-css": "^2.2.10",
     "vue": "^2.3.3",
+    "vue-lazyload": "^1.1.4",
     "vue-resource": "^1.3.4",
     "vue-router": "^2.3.1",
     "vuedraggable": "^2.14.1"
diff --git a/front/src/components/audio/album/Card.vue b/front/src/components/audio/album/Card.vue
index 7fd60d963..bd3b70e67 100644
--- a/front/src/components/audio/album/Card.vue
+++ b/front/src/components/audio/album/Card.vue
@@ -2,7 +2,7 @@
     <div class="ui card">
       <div class="content">
         <div class="right floated tiny ui image">
-          <img v-if="album.cover" :src="backend.absoluteUrl(album.cover)">
+          <img v-if="album.cover" v-lazy="backend.absoluteUrl(album.cover)">
           <img v-else src="../../../assets/audio/default-cover.png">
         </div>
         <div class="header">
diff --git a/front/src/components/audio/track/Table.vue b/front/src/components/audio/track/Table.vue
index e9beaa05a..630225e33 100644
--- a/front/src/components/audio/track/Table.vue
+++ b/front/src/components/audio/track/Table.vue
@@ -16,7 +16,7 @@
           <play-button class="basic icon" :discrete="true" :track="track"></play-button>
         </td>
         <td>
-          <img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
+          <img class="ui mini image" v-if="track.album.cover" v-lazy="backend.absoluteUrl(track.album.cover)">
           <img class="ui mini image" v-else src="../../..//assets/audio/default-cover.png">
         </td>
         <td colspan="6">
diff --git a/front/src/main.js b/front/src/main.js
index 4ffbdb2f7..a214c3881 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -10,6 +10,7 @@ import App from './App'
 import router from './router'
 import VueResource from 'vue-resource'
 import auth from './auth'
+import VueLazyload from 'vue-lazyload'
 
 window.$ = window.jQuery = require('jquery')
 
@@ -19,6 +20,7 @@ window.$ = window.jQuery = require('jquery')
 require('semantic-ui-css/semantic.js')
 
 Vue.use(VueResource)
+Vue.use(VueLazyload)
 Vue.config.productionTip = false
 
 Vue.http.interceptors.push(function (request, next) {