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

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

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

问题是，有没有办法检查文本是否已加载并仅在此条件下显示页面元素？

Answer 1

translate.process（）是异步代码，需要调用服务器并等待其响应。这意味着，当你调用这个函数时，它会在后台继续执行它自己的事情，而页面的其余部分继续加载。这就是用户在此功能仍在运行时看到页面的原因。

我能想到的一个最小方法是将它添加到head标签中的css文件中。

body { display: none }

然后，在this.process函数下，在for循环结束后，添加

document.body.style.display = 'block'

Answer 2

你可以用这种方式使用$（document）.ready（）

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

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

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

资料来源：Here

Answer 3

如果你想支持IE8：

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

Answer 4

当用户最初在DOMContentLoaded事件处理程序中加载页面时，将要执行的代码放在下面：

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');

值得注意的是，DOMContentLoaded与load事件不同