Question

我有一个标准的html页面，其中我使用Javascript和jQuery从返回JSON数据的API加载用户数据。该用户数据的一部分是语言标识符。然后我有各种语言文件，例如en.js，nl.js，sl.js并包含一个数组，其中键是一个标记，值是一个翻译的文本字符串。 E.g。

language = [];
language["salutation"] = "Hello";

我有本地化功能

GetLangStringWrite = function (token, defaultValue) {
    try {
        if (typeof language[token] == "undefined") {
            document.write(defaultValue);
        } else {
            document.write(language[token]);
        }
    } catch (e) {
        document.write(defaultValue);
    }
}

在body标签中调用此函数，例如

<div>
    <script>GetLangStringWrite('salutation', 'Hi');</script>
</div>

加载语言文件时，例如直接在我的html文件的标题中的en.js一切正常。

我正在使用以下方法加载语言文件：

<script>
var loadLanguageTimer;

function LoadLanguage() {
    if ((typeof ENV !== "undefined") && (typeof ENV.ud.language !== "undefined")) {
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "javascript/" + ENV.ud.language + ".js";
        $("head").append(s);
        clearTimeout(loadLanguageTimer);
        return;
    }
    loadLanguageTimer = setTimeout(LoadLanguage, 250);
}

LoadLanguage();
</script>

当我创建一个机制来检查语言参数是否可以从JSON文件中获得然后加载en.js，nl.js，etv。事情变得混乱＆＃34;。

加载机制工作正常但是html正文和 GetLangStringWrite（＆＃39;称呼＆＃39;，＆＃39;嗨＆＃39;）代码已经在之前执行/呈现语言文件可以加载。因此，API需要时间来获取数据。

有没有人知道如何解决这个问题，例如：延迟渲染身体直到JSON api可用或甚至更好。一个更好的方法可能不是包括但是使用 id 并使用jQuery来设置值，不幸的是，时间不允许为12小时内的演示修复它。

如果您需要更多信息，请与我们联系。

Answer 1

不要使用document.write：它是同步的，只要你想做异步的事情，你就会立即看到它的缺点。这是一个更好的解决方案。

不使用调用函数以使用document.write的内联脚本标记，而是创建具有将在稍后填充的数据属性的div。

<div data-localization-token="salutation">Hi</div>

然后，当您收到带有语言标识符的JSON数据时，请在回调中执行以下操作：

$("[data-localization-token]").each(function () {
    var token = $(this).data('localizationToken');
    if (typeof language[token] != 'undefined') {
        $(this).html(language[token]);
    }
});

你可能需要做一些额外的加载来根据JSON填充language，但是根据你的问题，你似乎已经自己处理过了。

在Javascript变量可用之前延迟渲染正文

1 个答案: