Modo per caricare in modo asincrono il widget di Google Traduttore per il tuo sito web?

Question

Esiste un modo per caricare in modo asincrono il widget di Google Traduttore per il tuo sito web?

Ho provato a metterlo in fondo alla mia pagina, ma il contenitore #google_translate_element era ancora vuoto.

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

Answer 1

Sembra che tu abbia diversi problemi nel codice. Ma la tua idea di base è sana.

Supponendo che <div id="google_translate_element"></div> è definito prima del tag script, il seguente dovrebbe funzionare:

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

Almeno ha funzionato per me quando ho messo tutto in un file HTML e caricato in cromo.

Ovviamente sarebbe possibile inserire la dichiarazione var e le righe seguenti in una funzione $(document).ready (o in qualche altro modo se non si utilizza jQuery). Quindi l'ordine tra div e script non sarebbe più di conseguenza.