时间戳

首页 > 解决方案 > 如何在Vue的A组件中预加载B组件的图像？

javascript - 如何在Vue的A组件中预加载B组件的图像？

问题描述

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

到目前为止，我所做的是在 A.vuegetUrls()的mounted()钩子中使用一种方法来获取图像的下载 url 并将它们存储在 上localStorage，当我已经到 B.vue 时，mounted()B 中的钩子触发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为简单起见省略标签）

我希望无需等待（太久）就可以观看所有图像，但是我尝试过的操作并没有加快速度。有什么建议么？

标签： javascriptasynchronousvue.jspreload

解决方案

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; 

    }

推荐阅读