Vue如何在A组件中预加载B组件的图片？

Question

假设我有两个 Vue 文件，A.vue 和 B.vue。 A 内部有一个指向 B 的路由器-link，其中包含我从 Firebase 实时数据库下载的大量图像。每次我第一次从 A 导航到 B 时，图像加载速度都没有我需要的那么快，所以我需要一种方法在 A.vue 中预加载这些图像，以便在 B.vue 中将它们全部呈现我点击 link.

到目前为止，我所做的是在 A.vue 上的 mounted() 挂钩中使用方法 getUrls() 获取图像的下载 url 并将它们存储在localStorage，当我已经到达 B.vue 时，B 中的 mounted() 钩子触发 setImage() 方法，该方法使用 callback 函数作为争论。

我读过 router.BeforeEach() 导航守卫方法，但我真的不知道如何实现它，也不确定这是否能解决我的问题。

我的代码：

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>

（为简单起见省略了 style 标签）

我希望无需等待（太长时间）就可以观看所有图像，但我尝试过的方法并没有加快速度。有什么建议吗？

Answer 1

TLDR：如果您想要快速获取图像，请将它们存储在本地。

解决方法很简单。因为我的图像对于这个应用程序非常重要，所以我不得不将它们存储在我的应用程序本地，而不是从 Firebase 实时数据库下载它们。这对渲染速度有很大帮助。所以我在我的应用程序中用这些文件创建了一个目录，并将我的设置方法更改为：

   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; 

    }

Vue如何在A组件中预加载B组件的图片？

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

javascript

asynchronous

preload

vue.js