Javascript 自动将页面上的所有英文文本翻译为阿拉伯语

我正在使用以下代码将自动加载的页面从英语翻译为阿拉伯语：

<!--This code will translate page contents automatically (without user input).
Settings located at line 9, current script will translate english to arabic-->
<style>#google_translate_element,.skiptranslate{display:none;}body{top:0!important;}</style>
<div id="google_translate_element"></div>
<script>
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar', autoDisplay: false}, 'google_translate_element');
        var a = document.querySelector("#google_translate_element select");
        a.selectedIndex=1;
        a.dispatchEvent(new Event('change'));
    }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

#google_translate_元素，.skiptranslate{display:none；}主体{top:0！重要；}
函数googleTranslateElementInit（）{
新的google.translate.TranslateElement（{pageLanguage:'en'，includelanguages:'ar'，autoDisplay:false}，'google_translate_element'）；
var a=document.querySelector（“谷歌翻译元素选择”）；
a、 selectedIndex=1；
a、 调度事件（新事件（“变更”）；
}

---

但是这段代码有时会翻译页面，有时不会。我仍然不知道这背后的确切原因。有没有人遇到过类似的问题，并且知道这种行为？

根据@samanthigamajig的评论，我在下面一行添加了

defer

和

async

，这似乎对我有效

<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" defer async></script>

在脚本中添加

defer

属性，以便在解析和加载所有HTML后运行脚本感谢您的帮助。延迟属性应该同时用于两个脚本还是仅用于第二个脚本？