In a scenario where I have two Vue files, A.vue and B.vue, the issue arises when navigating from A to B. B contains numerous images fetched from Firebase realtime database, resulting in slow loading times upon first visit. To address this, I aim to preload these images in A.vue to ensure they are ready for display in B.vue when accessed.
My current approach involves utilizing a getUrls() method within the mounted() hook of A.vue to extract image URLs and store them in localStorage. Subsequently, in B.vue, the mounted() hook triggers the setImage() method with a callback function argument to set the images.
Although I've considered using router.BeforeEach() navigation guards methods, I require guidance on implementation and whether it resolves the delay issue.
Code Samples:
A.vue
<template>
<div>
</div>
</template>
<script>
export default {
methods:{
getUrls: function(path, localStorage_id){
var storage = Firebase.storage();
var storageRef = storage.ref();
var pathReference = storageRef.child(path);
pathReference.getDownloadURL().then(function(url) {
let localStorageId = localStorage_id;
localStorage.setItem( localStorageId, url);
}).catch(function(error) {
});
}
},
mounted(){
this.getUrls("path/to/img", "img_id");
},
}
</script>
B.vue
<template>
<div>
<img id="img_id">
</div>
</template>
<script>
export default {
methods:{
setImage: function(localStorageId, imgId, setSrc){
var imgURL = localStorage.getItem(localStorageId);
console.log(imgURL);
setSrc(imgId, imgURL);
},
// callback function
setSrc: function(imgId, imgURL){
var img = document.getElementById(imgId);
img.src = imgURL;
}
},
mounted(){
this.setImage("localStorage_id", "img_id", this.setSrc);
},
}
</script>
(style tags omitted for simplicity)
Despite implementing the above methodology, I am yet to observe significant improvements in image loading speed. Any suggestions on how to enhance performance in this context?