时间戳

首页 > 解决方案 > 在内容完全加载之前不显示页面

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

问题描述

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

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

标签： javascripthtmljsonweb

解决方案

您可以通过这种方式使用 $(document).ready()

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

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

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

来源：这里

推荐阅读