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 cc686926..bad90430 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 7fd60d96..bd3b70e6 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 e9beaa05..630225e3 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 4ffbdb2f..a214c388 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) {
--
GitLab