diff --git a/front/package.json b/front/package.json index cc686926752aad7c6627b83c515eb078b866e9e9..bad90430f4144be99d4b17ac11e82073a6705ff0 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 7fd60d963b512ae637faa7c7dc8acbb2f9021d80..bd3b70e67765767368f9a095e60bc8fb2d19b370 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 e9beaa05a5ac8f0bb6285597a9316eb8afab4e4f..630225e334ae5046ec22a605bc1e293d599e671f 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 4ffbdb2f7b787a0dacb6c53eba914f190a0640fa..a214c3881e1535178a46a6b1101e2fac17685706 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) {