-4

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";
      });
});
Vlad Vladimir Hercules
  • 1,781
  • 2
  • 20
  • 37
  • 3
    I'm not one of the downvoters, but I think those votes are because your question has a lot of elements (pages, images, navigation, css, vue app) without much concrete information (code) about them. Your problem certainly seems clear to you, but to an external person, it's hard to grasp how to even start answering your question. See also https://stackoverflow.com/help/minimal-reproducible-example for some guidance. – bernie Aug 29 '19 at 08:25

2 Answers2

2

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

Oliver
  • 86
  • 1
  • 2
  • Thank you for your comment. Are you confident that `you can't listen to the load event on css background images`? I have also updated my post with extra examples of code. – Vlad Vladimir Hercules Aug 30 '19 at 07:57
  • https://stackoverflow.com/questions/6285809/how-can-i-tell-when-a-css-background-image-has-loaded-is-an-event-fired/6285898 https://www.sitepoint.com/community/t/onload-for-background-image/6462 Pretty sure... I don't think the load event on the document is going to help you out here tho so the code you've posted shouldn't work imho. Try the hack would be my suggestion – Oliver Aug 31 '19 at 09:19
0

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.
    })
},
...
Max
  • 469
  • 4
  • 7