最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

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

matteradmin3PV0评论

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>
Share asked Nov 2, 2011 at 19:39 hairynuggetshairynuggets 3,31122 gold badges57 silver badges90 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

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

Post a comment

comment list (0)

  1. No comments so far