mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-25 21:07:27 +00:00
Async background load on homepage
This commit is contained in:
Valentin Kaelin
parent
c2298855a9
commit
1b674f13fb
5 changed files with 120 additions and 67 deletions
51
client/package-lock.json
generated
51
client/package-lock.json
generated
|
|
@ -2889,8 +2889,7 @@
|
|||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||
"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"coa": {
|
||||
"version": "2.0.2",
|
||||
|
|
@ -5207,8 +5206,7 @@
|
|||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -5229,14 +5227,12 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -5251,20 +5247,17 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -5381,8 +5374,7 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -5394,7 +5386,6 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -5409,7 +5400,6 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
|
|
@ -5417,14 +5407,12 @@
|
|||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -5443,7 +5431,6 @@
|
|||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -5524,8 +5511,7 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -5537,7 +5523,6 @@
|
|||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -5623,8 +5608,7 @@
|
|||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -5660,7 +5644,6 @@
|
|||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -5680,7 +5663,6 @@
|
|||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
|
@ -5724,14 +5706,12 @@
|
|||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -6400,8 +6380,7 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
|
||||
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"string-width": {
|
||||
"version": "2.1.1",
|
||||
|
|
@ -6419,7 +6398,6 @@
|
|||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
|
||||
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^3.0.0"
|
||||
}
|
||||
|
|
@ -9548,8 +9526,7 @@
|
|||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
|
||||
"integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"rx-lite-aggregates": {
|
||||
"version": "4.0.8",
|
||||
|
|
|
|||
|
|
@ -34,4 +34,12 @@
|
|||
|
||||
.scale-100 {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 2s;
|
||||
}
|
||||
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
68
client/src/components/LazyBackgroundImage.vue
Normal file
68
client/src/components/LazyBackgroundImage.vue
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<transition :name="transitionName">
|
||||
<div
|
||||
v-show="imageState === 'loaded'"
|
||||
:class="[imageClass, imageState]"
|
||||
:style="computedStyle"
|
||||
:data-state="imageState"
|
||||
></div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
imageSource: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
imageClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
backgroundSize: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'cover'
|
||||
},
|
||||
transitionName: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
imageState: 'loading',
|
||||
asyncImage: new Image()
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedStyle () {
|
||||
if (this.imageState === 'loaded') {
|
||||
return 'background-image: url(' + this.asyncImage.src + '); background-size: ' + this.backgroundSize
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchImage () {
|
||||
this.asyncImage.onload = this.imageOnLoad
|
||||
this.imageState = 'loading'
|
||||
this.asyncImage.src = this.imageSource
|
||||
},
|
||||
imageOnLoad () {
|
||||
this.imageState = 'loaded'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.fetchImage()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,31 +1,40 @@
|
|||
<template>
|
||||
<div class="homepage h-screen flex flex-col items-center justify-center">
|
||||
<div class="bg-blue-900">
|
||||
<LazyBackground
|
||||
:image-source="require('@/assets/bg-homepage-1.jpg')"
|
||||
image-class="absolute inset-0"
|
||||
transition-name="fade"
|
||||
></LazyBackground>
|
||||
|
||||
<div class="absolute top-0 right-0">
|
||||
<div class="line line-top relative mr-4 mt-4 w-20 h-2"></div>
|
||||
<div class="h-screen flex flex-col items-center justify-center">
|
||||
<div class="absolute top-0 right-0">
|
||||
<div class="line line-top relative mr-4 mt-4 w-20 h-2"></div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 left-0">
|
||||
<div class="line line-bottom relative ml-4 mb-4 w-20 h-2"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center w-full max-w-lg">
|
||||
<img class="absolute logo" src="@/assets/Logo.svg" alt="logo" />
|
||||
<SearchForm @formSubmit="redirect" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-0 left-0">
|
||||
<div class="line line-bottom relative ml-4 mb-4 w-20 h-2"></div>
|
||||
</div>
|
||||
|
||||
<div class="relative flex flex-col items-center w-full max-w-lg">
|
||||
<img class="absolute logo" src="@/assets/Logo.svg" alt="logo">
|
||||
<SearchForm @formSubmit="redirect"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LazyBackground from '@/components/LazyBackgroundImage.vue'
|
||||
import SearchForm from '@/components/SearchForm.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LazyBackground,
|
||||
SearchForm
|
||||
},
|
||||
|
||||
methods: {
|
||||
redirect(summoner, region) {
|
||||
redirect (summoner, region) {
|
||||
this.$router.push(`/summoner/${region}/${summoner}`)
|
||||
},
|
||||
}
|
||||
|
|
@ -33,23 +42,16 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.homepage {
|
||||
background-image: url("../assets/bg-homepage-1.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.line {
|
||||
background: rgba(178, 245, 234, .55);
|
||||
background: rgba(178, 245, 234, 0.55);
|
||||
}
|
||||
|
||||
.line::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 4.5rem;
|
||||
height: .5rem;
|
||||
background: rgba(178, 245, 234, .55);
|
||||
height: 0.5rem;
|
||||
background: rgba(178, 245, 234, 0.55);
|
||||
}
|
||||
|
||||
.line-top::after {
|
||||
|
|
@ -60,7 +62,7 @@ export default {
|
|||
.line-bottom::after {
|
||||
transform-origin: top left;
|
||||
transform: rotate(90deg) translateX(-100%);
|
||||
margin-left: .5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
|
|||
4
server/package-lock.json
generated
4
server/package-lock.json
generated
|
|
@ -164,7 +164,6 @@
|
|||
"version": "2.8.5",
|
||||
"resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
|
||||
"integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"object-assign": "^4",
|
||||
"vary": "^1"
|
||||
|
|
@ -538,8 +537,7 @@
|
|||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
|
||||
"dev": true
|
||||
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
|
||||
},
|
||||
"on-finished": {
|
||||
"version": "2.3.0",
|
||||
|
|
|
|||
Loading…
Reference in a new issue