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

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

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

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

2 个答案: