javascript - 在内容完全加载之前不显示页面

Question

我正在创建一个应该以两种语言存在的登录页面。应显示的文本位于两个 JSON 文件中，分别称为“ru.json”和“en.json”。当用户单击“更改语言”按钮时，将执行以下功能:

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

其中 Translate() 如下:

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

一切正常，但是，当用户第一次打开页面时，如果他的互联网连接不好，他只能看到页面的元素，而没有文本。虽然只有1-2秒，但仍然很烦人。

问题是，有没有办法检查文本是否已加载并仅在这种情况下显示页面元素？

Answer 1

可以这样使用$(document).ready()

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

您可以通过这种方式使用JavaScript纯加载事件

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

来源:Here