Question

让我们说我有两个Vue文件，即A.vue和B.vue。在A内部，有一个指向B的路由器链接，其中包含许多我从Firebase实时数据库下载的图像。每次我从A导航到B时，图像加载的速度都没有达到我需要的速度，因此，我需要一种方法将这些图像预加载到A.vue中，以便在单击链接时将它们全部呈现在B.vue中。

到目前为止，我所做的是在A.vue的getUrls()钩子中使用方法mounted()获取图像的下载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组件的图像？

1 个答案: