クリックでGoogle Translateウィジェットを読み込む方法は？

Question

私のウェブサイトでGoogle Translate Widgetを使用していますが、読み込み速度が遅くて頻繁に使用されないため、ページが読み込まれるときに読み込みたくありません。代わりにイメージがあり、そのイメージをクリックしてウィジェットをロードする必要があります。

今のところ、私はこのコードを持っている：

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

次にあなたが例えば、スクリプトにクリックハンドラを追加したり、onclickのHTMLを使用して、次のいずれか

<img onclick="loadGoogleTranslate(); this.remove()">