1

I´m trying to hide my login template until everything is loaded. Right now what is happening is that when I enter my site, the template loads, then my fonts, etc. I don´t want to show anything to the user until I can show my page with all fonts, images, everything.

I have already tried using v-show, v-if, but it didn´t work. I have also use mounted with this.$nextTick = false, but no success.

Busy is the variable I want to use to control if the page can be show or not.

This is my div: 

<div class="background kt-grid kt-grid--ver kt-grid--root kt-page" v-if="!busy">

And this is my script/export default:

mounted: function(){
    this.$nextTick( function() {
        this.busy = false;
    })
}

I expect to see all contents inside that div only after the page fully loads.

Thanks in advance

fmbra
  • 73
  • 6
  • set display to "none" or height to "0" of your outerHTML, and only when this.busy == True revert it – WiseDev Sep 18 '19 at 14:41
  • maybe you can try this: https://stackoverflow.com/questions/42262007/hiding-vue-js-template-before-it-is-rendered/42262375 – Loki Sep 18 '19 at 14:59
  • 2
    If you can answer what "everything is loaded" means, you can describe that in code, and then you can then almost trivially call `document.body.classList.remove("loading")`. However, the _idea_ of hiding things is usually a really bad one: not everyone has JS enabled, and people should still see a basic site, _with_ ways to get to that content you're hiding for purely aesthetic reasons. Function over form makes the web great. Form over function makes it look nice, but also makes for a worse web experience. – Mike 'Pomax' Kamermans Sep 18 '19 at 15:01
  • building websites for people with js disabled. yeah, everyone is doing that nowadays... – oshell Sep 18 '19 at 15:37
  • IMHO sites that do this feel extremely annoying to use, especially with a slow Internet connection. It's slightly better if it is a SPA but still not the best. – Aurel Bílý Sep 18 '19 at 17:31

2 Answers2

0

You can do this: initialize the style you don't wanna show by using 

<div :display="yourStyleObject">example</div>

inside your style object, you can pass something like this:

yourStyleObject: {
display: 'none';
}

then, in the mounted() function, you modify the value of your data from display: 'none' to display: 'block'

if you try to block the render using v-if, it won't work until mounted, it will render first so it can hide after mounted

Celso Wellington
  • 875
  • 8
  • 19
0

First hide body by using some CSS:

<body style="display:none">

Then set script at end of body:

<script>
    document.body.style.display="block";
</script>

When document gets started loading then CSS will hide whole body at beginning. when document gets loaded fully then our script will change body style to display:block

You can also show loaders using this trick

Ritesh Khandekar
  • 3,885
  • 3
  • 15
  • 30