html 多语言网站 - 发生语言延迟

Question

我正在我的网站上实施多语言解决方案：我检测用户的浏览器语言。

我在 HTML 中拥有的是英语的默认文本。

所有的文本对象都被分配了一个 id。

然后在 JS 表中，我使用 innerHTML 替换正确语言的文本，以翻译成法语。

HTML

<div>
<h3 id="test">
This is a Test !
</h3>
</div>

JS

function adjust_languages() {

    // change all object text, if french
    if (sprache == "french") {

        document.getElementById("test").innerHTML = "Ceci est un test !";

    }

这很有效。 但是，当用户的连接速度不是很快时，在 HTML 文本以英文显示的那一刻和它被翻译成法文的那一刻之间会出现延迟。

换句话说，在翻译成法语之前，用户会看到英语 1 秒钟。

我正在考虑完全摆脱 HTML 中的文本并在 JS 中使用英语，但这意味着 HTML 文件中的文本为 0，我认为这不是很常见......

您对首先显示正确语言的建议是什么，而不会发生任何延迟？ 非常感谢您的帮助。

Answer 1

我认为你应该在你想要的语言上制作一个文本框。

<!DOCTYPE html>
<html>
    <head>
       <title>Langtest</title>
    </head>
    <body>
       <input type="text" id="lang" placeholder="Type a language">
       <button onclick="adjust_languages()">Change!</button>
       <h3 id="test">This is a test!</h3>
    </body>
    <script>
       var sprache = document.getElementById("lang").textContent;
       function adjust_languages()
       {
           if (sprache = "french")
           {
               document.getElementById("test").innerHTML = "Ceci est un test !";
           }
       }
    </script>
</html>

认为您必须需要一个 var 所以即使您的连接速度很慢并且不使用外部 API 也不会发生延迟

Answer 2

在服务器上进行翻译或使用客户端模板库在客户端上进行翻译。 我推荐 mustache，因为它使用起来非常简单且重量轻。 它会让您的生活更轻松，并且可能比您自己的解决方案运行得更快。

此外，如果您无论如何都不想这样做：请使用 textContent 而不是innerHTML。 后者需要确定内容是否是 HTML 并评估它找到的任何元素，而 textContent 只是创建一个包含字符串的文本节点。

html 多语言网站 - 发生语言延迟

问题描述

2 个解决方案

解决方案1
1 2021-04-08 04:08:41

解决方案2
0 2017-03-11 06:38:27

html 多语言网站 - 发生语言延迟

问题描述

2 个解决方案

解决方案1 1 2021-04-08 04:08:41

解决方案2 0 2017-03-11 06:38:27

解决方案1
1 2021-04-08 04:08:41

解决方案2
0 2017-03-11 06:38:27