下载图像时的加载器

Question

I am after a pre-loader (a spinning loader, to demonstrate that image is being loaded in the background). This preloader should appear while css backgrounds are being loaded.

Background story: I have a global pre-loader for the SPA itself, so the user sees a loader while the SPA is being downloaded in the background.

However, when the user navigates to a different page with images, those new images have to be downloaded by the user's browser and the global pre-loader is not being triggered.

What can I do to show existing loader until all images were downloaded or is there an alternative solution?

---

With jQuery a solution would have been to use $(document).ready , to remove loaded once the document is ready. However, I am struggling to find a solution for it with VueJS.

---

Currently the solution that I see for is to use something similar to this: https://vuejsexamples.com/a-vue-component-for-showing-loader-during-image-loading/ , but still, this wouldn't handle css background images.

---

Added code below to the main component. mounted() worked. The watcher() display loader but when I added eventListener into the watcher() the listened was not trigger.

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
    }
  }
};

I have tried using router navigation for this, but addEventListener was not triggered because page is already loaded:

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";
      });
});

Answer 1

How can I check if a background image is loaded?

Looks like you can't listen to the load event on css background images.

What you can do, as described in the linked post, is using a regular <img> tag and listen to its load event. Here's how that could look like in a Vue component: https://codesandbox.io/embed/loading-css-basckground-images-n4nf2

ImageLoadHack.vue is where the magic happens in the above example

Answer 2

Well, you could always do the same thing inside your Vue component no?

I haven't used Vue for a while, but can you do something like:

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