Angularjs -angular-translate.js 闪烁问题

$translateProvider.useStaticFilesLoader({prefix: '/resources/js/i18n/',suffix: '.json'});

前台渲染的语言切换随着 前后端分离应用的越来越广。angular-translate.js 是比较好的前端多语言插件。

可是有个问题一直困扰着我们。 刷新时 闪烁问题。

原因是 语言文件的异步加载。HTML已经解析好了 ，但是 我们的 语言包 文件还没有加载好。

网上有好多 方法 ，就是 先隐藏HTML 中的 标签 等 语言包文件加载好后，再渲染 标签，就好了。

这个方法不错，但要在原来的基础上改好的东西。我比较懒，所以就想了其他的办法。

就是 在Head 标签里面用<script> 标签 加载语言文件包。

<script src="./en.js"></script><script src="./cn.js"></script>

把语言包文件 的文件类型由 json 改为 js文件。里面的内容改为如下：

en.js 文件

var mmen={"headline": "Hello there, This is my awesome app!","intro": "And it has i18n support!"}

cn.js文件

var mmcn={"headline": "你好！","intro": "很高兴认识你!"}

然后 替换 最上面的代码为

$translateProvider.translations('en',mmen);$translateProvider.translations('cn',mmcn);

到处结束 再刷新页面 也不会出现 闪烁问题了。

如果语言包较大 可以 先按上面的方法加载一个语言包。然后再异步加载 另一个 语言包。