Way to asynchronously load Google Translate widget for your website?

Question

Is there a way to asynchronously load Google Translate widget for your website?

I tried putting this on the bottom of my page, but the #google_translate_element container was still empty.

<!-- Asynchronous Google Translate -->
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,bg,bn,de,el,eo,es,en,fr,hi,id,it,iw,ja,ko,pl,pt,ru,th,tr,vi,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-1234-1'}, 'google_translate_element');
}

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

Penetralia

Answer 1

It seems that you have several problems in your code. But your basic idea is sound.

Assuming that <div id="google_translate_element"></div> is defined before the the script tag, the following should work:

<!-- Asynchronous Google Translate -->
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en',
      includedLanguages: 'ar,bg,bn,de,el,eo,es,en,fr,hi,id,it,iw,ja,ko,pl,pt,ru,th,tr,vi,zh-CN',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
      gaTrack: true, gaId: 'UA-37652767-1'}, '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>

At least it worked for me when I placed it all in a HTML file and loaded into chrome.

Of course it would be possible to place the vardeclaration and following lines in a $(document).ready function (or in some other manner if you do not use jQuery). Then the order between div and script would no longer be of consequence.

Emotionalism

Thanks. Can you "peer review" my edit? I improved the src to be just // rather than http://. That way it works with HTTPS too. It's a neat trick. – Penetralia

I don't have the rep yet to review, otherwise I would. Ahh - // didn't work for me, but that was probably because I didn't have it on a server. – Emotionalism

This looks good actually! I'd recommend using defer instead of async though because of IE support. – Tabard

Well, I did a bit of reading up and it turns out that neither defer nor async are currently supported in Opera - and IE 4 and upwards until IE9 use a non-standard implementation of defer, so it probably won't work as the specs say anyways. Here you can see browser compatibility for the script tag and its attributes. – Emotionalism