进行翻译的生命周期监控及触发

当执行 translate.execute(); 之后，它会进行一下操作：

  1. 进行一些初始化及检测，如果不达标则直接终止不做任何处理，同时也不会触发任何下面的事件。
  2. 进行图片翻译
  3. 对要翻译的区域的所有节点进行扫描，识别出需要进行翻译的文本，进行收集分析，加入待翻译的文本队列
  4. 对待翻译的文本队列中的翻译文本进行本地浏览器缓存命中处理，如果本地缓存全部命中了，那也就没有后面的网络请求什么事了
  5. 对本地浏览器缓存命中之后，没有被缓存命中，未进行翻译的文本，进行通过请求网络接口的方式进行翻译处理，发起网络请求，将要翻译的文本发送到翻译服务进行翻译，等待拿到翻译结果后，进行翻译。（这个会产生 50ms ~ 10s 的时间差，也是造成视觉上翻译速度快慢的最根本原因）
  6. 完毕

以下提供的几个针对其生命周期中的某个特定点，提供监控及主动触发你自定义的方法，来做一些事情。

translate.lifecycle.execute.start

每当触发执行翻译动作 translate.execute() 时，当缓存中未发现，需要请求翻译API进行翻译时，在发送API请求前，触发此

  1. translate.lifecycle.execute.start.push(function(uuid, from, to){
  3. });

translate.lifecycle.execute.translateNetworkFinish

当 translate.execute() 触发网络翻译请求完毕（不管成功还是失败），并将翻译结果渲染到页面完毕后，触发此。

  1. translate.lifecycle.execute.translateNetworkFinish.push(function(uuid, to){
  3. });

translate.lifecycle.execute.renderFinish

translate.execute() 的翻译渲染完毕触发。
这个完毕是指它当触发 translate.execute() 进行翻译后，无论是全部命中了本地缓存，还是有部分要通过翻译接口发起多个网络请求，当拿到结果（缓存中的翻译结果或多个不同的有xx语种翻译的网络请求全部完成，这个完成是包含所有成功跟失败的响应），并完成将翻译结果渲染到页面中进行显示后，触发此
它跟 translateNetworkFinish 的区别是， translateNetworkFinish 仅仅针对有网络请求的才会触发，而 renderFinish 是无论何种情况，只要 translate.execute() 执行完毕都会触发。比如全部命中了浏览器本地缓存，无需发起任何网络翻译请求这种情况时，也会触发。

  1. translate.lifecycle.execute.renderFinish.push(function(uuid, to){
  3. });

实际使用场景示例

比如，我有一个中文网站，翻译为英文浏览时，要做到完全不显示中文的文字内容，不出现先显示中文然后瞬间在显示英文的情况。
操作方式：
首先，在原本中文网站加载后，先用CSS显示一个遮罩层，将原本显示中文的部分遮罩起来，在遮罩层上，用英文显示一个提示信息，比如 <div id="load">loading...</div>
然后在 translate.execute(); 的前面，增加一个翻译完成的监控，以便在翻译完成后，来触发将 loading… 给隐藏掉 : 

  1. translate.lifecycle.execute.renderFinish.push(function(uuid, to){
  2.     document.getElementById('load').style.display='none';
  3. });

这样就实现了打开网页后，先在页面的中文上面出现个英文提示 loading… 给用户一个友好的提示，当翻译执行完毕后（页面的中文已经改成了英文）将 <div id="load"> 这个id元素隐藏，将loading… 的提示隐藏，将英文的页面显示出来。

注意

  1. 需要 translate.js v3.17.7 及更高版本
  2. 需要设置在 translate.execute() 前面