Javascript 在页面加载时间方面，使用$route.path加载背景图像的效果如何

我正在懒洋洋地加载我的所有路线，但我发现实现所有背景图像的唯一方法是使用以下方法：

App.vue

<template>
  <div id="app" v-bind:class="[
    { 'forside' : $route.path == '/' }, 
    { 'konferanse' : $route.path == '/konferanse' }, 
    { 'pizzeria' : $route.path == '/pizzeria-del-generale' }, 
    [ { 'lobby' : $route.path == '/om-oss/bedriften' || $route.path == '/om-oss/jobb' || $route.path =='/om-oss/yrke' || $route.path == '/om-oss/kontakt' || $route.path == '/om-oss/personvern' || $route.path == '/om-oss/veien-hit' || $route.path == '/opplevelser/spill' || $route.path == '/opplevelser/aktiviteter' }], 
    { 'selskap' : $route.path == '/selskap' || $route.path == '/catering' || $route.path == '/blogg' }  ]">
      <my-header></my-header>
      <router-view />
      <my-footer></my-footer>
  </div>
</template>

我怀疑这给我提供了一个相当慢的页面加载时间。谷歌的页面速度测试给了我47分的手机版（80分的桌面版）

---

有什么方法可以轻松加载这些背景图像吗？

这对于桌面来说是个不错的加载分数（尽管与您的实际感受相比，lighthouse并不总是最好的衡量标准），但是对于移动设备，最好调整图像的大小

您可以使用

图像集

，但浏览器支持不太好，或者您可以在每个类上使用媒体查询，将图像交换为较小的版本

---

至于延迟加载背景图像，有很多方法，但我不确定是否需要仔细研究。也许值得一读：

感谢您的输入@Daniel_Knight。我确实有一个媒体查询，有三种不同的图像大小。哦，那真奇怪。如果你觉得很好，我就不担心了。我不认为每个图像的v型绑定对性能有多大影响（如果有的话），但我也不确定。不用担心@乔纳斯