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

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

您可以通过这种方式使用$（document）.ready（）

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

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

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

资料来源： 这里

Answer 2

如果要支持IE8：

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

Answer 3

将用户最初加载页面时要执行的代码放在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事件不同

Answer 4

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

我可以考虑的一种最小方法是将其添加到head标签中的css文件中。

body { display: none }

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

document.body.style.display = 'block'