如何点击加载谷歌翻译小部件

How to load Google Translate widget on click?

本文关键字：小部 翻译 谷歌 何点击 加载      更新时间：2024-04-16

我在我的网站上使用谷歌翻译小工具，但我不希望在加载页面时加载它，因为它会减慢加载速度，而且不经常使用。我希望有一个图像，只有当我点击该图像加载小部件时。

现在，我有这个代码：

<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>

有人能帮忙吗？

将脚本加载部分放入函数中：

<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()">
相关文章：