How can I preload images of B component in A component in Vue?

Question

Lets say I have two Vue files, A.vue and B.vue. Inside A there is a router-link that points to B, which contains a lot of images that I'm downloading from Firebase realtime database. Every first time I navigate from A to B the images don't load as fast as I need, so I need a way to preload those images in A.vue in order to have them all rendered in B.vue when I click the link.

What I have done so far is using a method getUrls() in the mounted() hook on A.vue to get the download url of the images and store them on localStorage, and by the time I've already got to B.vue, the mounted() hook inside B triggers the setImage() method which uses a callback function as an argument.

I've read about router.BeforeEach() navigation guards methods but I really don't know how to implement that and not really sure if that solves my problem.

My Code:

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"); // this Is just for one image 
                                              (to keep it simple) 
   },
  }
</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>

(ommitted style tags for simplicity)

I expect to be available to watch all images without having to wait (too long) but I don't get any speed up with what I've tried. Any suggestions?

I did it in router you can see my answer here : https://stackoverflow.com/a/59419841/2045817 — TingSter, Dec 20 '19 at 04:37

score 0 · Accepted Answer · answered Dec 24 '18 at 15:40

TLDR: if you want images quickly, store them locally.

The solution was simple. Because my images were so important for this app I had to store them locally in my app, instead of downloading them from the Firebase realtime database. That helped a lot with the rendering speed. So I created a dir with those files in my app and changed my setting methods to:

   setImage: function(my_imgURL, imgId, setSrc){
    var imgURL = my_imgURL; 
    console.log(imgURL);
    setSrc(imgId, imgURL);          
    },
    setSrc: function(imgId, imgURL){
        var img = document.getElementById(imgId);
        img.src = imgURL; 

    }

How can I preload images of B component in A component in Vue?

1 Answers1