mercredi 5 septembre 2018

Don't show page until content has fully loaded

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?




Aucun commentaire:

Enregistrer un commentaire