我正在创建一个应该以两种语言存在的登陆页面。应显示的文本位于两个 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秒，但仍然很烦人。

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

解决方案

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

我可以想到的一种最简单的方法是将其添加到 CSS 文件的 head 标签中。

body { display: none }

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

document.body.style.display = 'block'