Don't show page until content has fully loaded

Question

I am creating a landing page which should exist in two languages. The texts that should be shown are in two JSON files, called accordingly "ru.json" and "en.json". When a user clicks on the "Change language" button, the following function is executed:

function changeLang(){
if (userLang == 'ru') {
    userLang = 'en';
    document.cookie = 'language=en';
}
else {
    userLang = 'ru';
    document.cookie = 'language=ru';
}

var translate = new Translate();
var attributeName = 'data-tag';
translate.init(attributeName, userLang);
translate.process();
}

Where Translate() is the following:

function Translate() {
//initialization
this.init =  function(attribute, lng){
    this.attribute = attribute;
    if (lng !== 'en' && lng !== 'ru') {
        this.lng = 'en'
    }
    else {
        this.lng = lng;
    }
};
//translate
this.process = function(){
    _self = this;
    var xrhFile = new XMLHttpRequest();
    //load content data
    xrhFile.open("GET", "./resources/js/"+this.lng+".json", false);
    xrhFile.onreadystatechange = function ()
    {
        if(xrhFile.readyState === 4)
        {
            if(xrhFile.status === 200 || xrhFile.status == 0)
            {
                var LngObject = JSON.parse(xrhFile.responseText);
                var allDom = document.getElementsByTagName("*");
                for(var i =0; i < allDom.length; i++){
                    var elem = allDom[i];
                    var key = elem.getAttribute(_self.attribute);

                    if(key != null) {
                        elem.innerHTML = LngObject[key]  ;
                    }
                }

            }
        }
    };
    xrhFile.send();
}

Everything works fine, however, when a user opens the page for the first time, if his Internet connection is bad, he just sees the elements of the page without text. It is just 1-2 seconds, but still annoying.

The question is, is there any way to check the text has loaded and display the page elements only on this condition?

Answer 1

You can use $(document).ready() in this way

$(document).ready(function(){
    //your code here;
})

You can use the JavaScript pure load event in this way

window.addEventListener('load', function () {
//your code right here;
}, false);

Source: Here

Answer 2

If you want to suppori IE8:

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // run some code.
    }
}

Answer 3

Put the code you want to execute when the user initially loads the page in a DOMContentLoaded event handler like below:

 document.addEventListener('DOMContentLoaded', function() { console.log('Whereas code execution in here will be deffered until the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.'); }); console.log('This will log immediatley'); 

It's important to note that DOMContentLoaded is different than the load event

Answer 4

translate.process() is asynchronous code which needs to make a call to a server and wait for its response. What it means is that, when you call this function, it goes in the background to go do its own thing while the rest of the page continues loading. That is why the user sees the page while this function is still running.

One minimal way I can think around this is by adding this to your css files in the head tag.

body { display: none }

And then, under this.process function, after the for loop ends, add

document.body.style.display = 'block'