0๐
โ
I found the solution to not append the HTML raw element, instead I use the vueโs native data binding.
App.vue
<template>
<div class="">
<div class="loader" v-show="progress < 100">
<h1>{{ progress }}%</h1>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
progress: 0,
img_cache: [],
vid_cache: []
}
},
// Static manifest
manifest: [
'./static/intro/img/test.jpg',
'./static/intro/video/bg.mp4',
'./static/intro/video/bg.webm',
'./static/home/video/scroll.mp4',
'./static/home/video/scroll.webm'
],
ready: function() {
let Loader = require('resource-loader');
let loader = new Loader();
let that = this;
let manifest = that.$options.manifest;
manifest.forEach(function(file) {
loader.add(file, file);
});
loader.on('progress', function(event, resource){
that.progress = Math.round(event.progress);
console.log('progress', this.progress);
if(resource.url.match(/\.(jpe?g|png|gif|bmp)$/i)){
that.img_cache.push({
'name': resource.name,
'src': resource.url
});
}else {
that.vid_cache.push({
'name': resource.name,
'src': resource.url
})
}
});
loader.on('complete', function(event, resources){
console.log('COMPLETE');
that.$route.router.go('/intro');
});
loader.load();
}
}
</script>
Intro.vue
<template>
<h1>INTRO</h1>
<a v-link="{ path: '/home' }">Continue to Home</a>
<div class="" v-for="itm in $root.vid_cache">
<video v-bind:src="itm.src" autoplay loop>
</video>
</div>
</template>
<script>
import Loader from './Loader'
export default {
name: 'Intro',
components: {Loader},
ready: function(){
console.log('READY');
}
}
</script>
I checked in the network inspector, the ressources load only once.
๐คExiste Deja
Source:stackexchange.com