javascript - Google translate element - load after page ready - Stack Overflow

admin管理员组

文章数量:1344965

I am using the google web translate element on my page. For those that don't know what it is you can find it here:

It loads on the page using javascript. I have it embedded on the top of my page which causes the rest of my content to stop loading until the translate bar has pleted it's load.

How can I delay the javascript running until my page has fully loaded??

This is the script:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'da,nl,en,fi,fr,it,no,ru,es,sv',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google/translate_a/element.js?cb=googleTranslateElementInit"></script>

I am using the google web translate element on my page. For those that don't know what it is you can find it here: http://translate.google./translate_tools

It loads on the page using javascript. I have it embedded on the top of my page which causes the rest of my content to stop loading until the translate bar has pleted it's load.

How can I delay the javascript running until my page has fully loaded??

This is the script:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'da,nl,en,fi,fr,it,no,ru,es,sv',
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google./translate_a/element.js?cb=googleTranslateElementInit"></script>

• javascript
• load
• domready

Share Follow asked Nov 2, 2011 at 19:39 hairynuggetshairynuggets 3,3112222 gold badges5757 silver badges9090 bronze badges 1

• 4 You mean besides putting it at the bottom of the page? – John Conde Commented Nov 2, 2011 at 19:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Another method would be to load google translate asynchronously.

<div class="custom-translate" id="google_translate_element"></div>

<!-- ASYNCHRONOUS Google Translate -->
        <script type="text/javascript">
        function googleTranslateElementInit() {
          new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false},'google_translate_element');
        }

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

As mented by John Conde, I put the script at the bottom of the page and hey presto, page load

本文标签： javascriptGoogle translate elementload after page readyStack Overflow