あなたのウェブサイト用にGoogle Translateウィジェットを非同期にロードする方法はありますか？

Question

あなたのウェブサイトにGoogle Translateウィジェットを非同期に読み込む方法はありますか？

これはページの下部に貼り付けましたが、#google_translate_elementコンテナはまだ空です。

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

コードにいくつか問題があるようです。しかし、あなたの基本的な考えは健全です。

<div id="google_translate_element"></div>は、スクリプトタグの前に定義されていると仮定すると、以下の作業をする必要があります：

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

は、少なくともそれは私がHTMLファイルにすべてを置いたときに私のために働いたとクロムにロードされました。

もちろん、var宣言とそれに続く行を$(document).ready関数（またはjQueryを使用しない場合はその他の方法）に配置することは可能です。その後、divとscriptの間のオーダーはもはや影響を及ぼさないでしょう。