javascript - 如何在点击时加载谷歌翻译小部件？

Question

我在我的网站上使用 Google Translate Widget，但我不希望它在页面加载时加载，因为它会减慢加载速度并且不经常使用。我想要一个图像，并且只有当我单击该图像来加载小部件时。

现在，我有这个代码:

<script type="text/javascript">


 function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'ro',
      includedLanguages: 'af,ar,de,en,es,fr,hu,it,ja,no,ro,ru,tr,zh-CN',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
      autoDisplay: false}, 'google_translate_element');
  }

  var googleTranslateScript = document.createElement('script');
  googleTranslateScript.type = 'text/javascript';
  googleTranslateScript.async = true;
  googleTranslateScript.src = 'http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
  ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild(googleTranslateScript);
</script>

有人可以帮忙吗？

Answer 1

将脚本加载部分放在函数中:

<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'ro',
      includedLanguages: 'af,ar,de,en,es,fr,hu,it,ja,no,ro,ru,tr,zh-CN',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
      autoDisplay: false}, 'google_translate_element');
  }

  function loadGoogleTranslate() {
    var googleTranslateScript = document.createElement('script');
    googleTranslateScript.type = 'text/javascript';
    googleTranslateScript.async = true;
    googleTranslateScript.src = 'http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild(googleTranslateScript);
  }
</script>

然后您可以向脚本添加点击处理程序，或者使用 html onclick，例如:

<img onclick="loadGoogleTranslate(); this.remove()">