Как загрузить виджет Google Translate на клик?

Question

Я использую виджет Google Translate на своем веб-сайте, но я не хочу, чтобы он загружался, когда страница загружается, потому что она замедляет скорость загрузки и часто не используется. Я хотел бы иметь изображение вместо этого, и только если я нажму на это изображение, чтобы загрузить виджет.

На данный момент, у меня есть этот код:

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

Тогда вы либо добавить обработчик щелчка в скрипт, или использовать HTML OnClick, например:

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