如何在点击时加载 Google 翻译小部件？

Question

我在我的网站上使用 Google 翻译小部件，但我不想在页面加载时加载它，因为它会降低加载速度并且不经常使用。我想要一个图像，并且只有当我单击该图像以加载小部件时。

现在，我有这个代码：

<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()">

如何在点击时加载 Google 翻译小部件？

How to load Google Translate widget on click?

javascript

jquery

google-translate