Javascript 下载图像时使用的加载程序

我在寻找一个预加载程序（一个旋转加载程序，用于演示正在后台加载图像）加载css背景时应显示此预加载程序。

背景故事： 我为SPA本身提供了一个全局预加载程序，因此用户在后台下载SPA时会看到一个加载程序

但是，当用户导航到包含图像的其他页面时，这些新图像必须由用户的浏览器下载，并且不会触发全局预加载程序

在下载所有图像之前，我可以如何显示现有加载程序，或者是否有其他解决方案

---

使用jQuery的解决方案是使用

$（document）.ready

，在文档准备好后删除加载的内容。但是，我正在努力用VueJS找到解决方案

---

目前，我看到的解决方案是使用类似的东西：，但仍然不能处理css背景图像

---

在主组件中添加了下面的代码<代码>已安装（）已工作。

watcher（）

显示加载程序，但当我将

eventListener

添加到

watcher（）

中时，未触发侦听

export default {
  mounted() {
    window.addEventListener("load", () => {
      let element = document.getElementById("global-loader");
      element.style.display = "none";
    });
  },
  watch: {
    $route(to, from) {
      let element = document.getElementById("global-loader");
      element.style.display = "block";
      // I dont know on how to switch global loader off after page switch took place and images were loaded
    }
  }
};

我已尝试为此使用路由器导航，但未触发

addEventListener

，因为页面已加载：

router.beforeEach((to, from, next) => { 
    let element = document.getElementById("global-loader");
    element.style.display = "block";

});

router.afterEach((to, from, next) => { 
    window.addEventListener("load", () => {
        let element = document.getElementById("global-loader");
        element.style.display = "none";
      });
});

---

嗯，你可以在Vue组件中做同样的事情不

我已经有一段时间没有使用Vue了，但您可以执行以下操作：

...
mounted() {
    window.addEventListener('load', () => {
         // this is the same thing as "$(document).ready", do whatever you want here. Page is loaded.
    })
},
...

看起来您无法在css背景图像上侦听加载事件

如链接文章中所述，您可以使用一个常规的

标记并监听其加载事件。以下是在Vue组件中的外观：

---

ImageLoadHack.vue

是上述示例中的神奇之处

我不是下载者之一，但我认为这些投票是因为你的问题有很多元素（页面、图像、导航、css、vue应用程序），而没有太多具体的信息（代码）。你的问题对你来说显然很清楚，但对一个外部的人来说，甚至很难理解如何开始回答你的问题。另请参阅以获取一些指导。感谢您的评论，我已尝试使用侦听器，但在路线之间导航时未触发侦听器。感谢您的评论。您确信

无法在css背景图像上侦听加载事件吗？我还用额外的代码示例更新了我的帖子。非常肯定。。。我认为文档上的加载事件不会在这里帮助您，因此您发布的代码不应该在我看来有效。我的建议是试试黑客