javascript - 谷歌翻译小部件延迟显示在网页上

Question

我在我网站的导航栏中添加了谷歌翻译小部件。但是，除翻译选项外，所有其余导航选项都显示在页面加载中。它会延迟显示。如何使其与其他导航栏选项同时出现？

 <script>
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
    pageLanguage: 'en', includedLanguages: 'en,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
  $(document).ready(function(){
    $('#google_translate_element').bind('DOMNodeInserted', function(event) {
      $('.goog-te-menu-value span:first').html('Language');
      $('.goog-te-menu-frame.skiptranslate').load(function(){
        setTimeout(function(){
          $('.goog-te-menu-frame.skiptranslate').contents().find('.goog-te-menu2-item-selected .text').html('Translate');    
        }, 10);
      });
    });
  });
</script>
  <script>    	
$('document').ready(function () {

		// RESTYLE THE DROPDOWN MENU
    $('#google_translate_element').on("click", function () {

        // Change font family and color
        $("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div, .goog-te-menu2 *")
            .css({
                'color': '#fff',
			    'background-color': '#0069BD',
                'font-family': 'Helvetica',
				 'font-size': '17px',


            });
        // Change menu's padding
        $("iframe").contents().find('.goog-te-menu2-item-selected').css ('display', 'none');
			
				// Change menu's padding
        $("iframe").contents().find('.goog-te-menu2').css ('padding', '0px 0px 0px 0px');
      
        // Change the padding of the languages
        $("iframe").contents().find('.goog-te-menu2-item div').css('padding', '12px 16px ');
      
        // Change the width of the languages
        $("iframe").contents().find('.goog-te-menu2-item').css('width', '100%');
        $("iframe").contents().find('td').css('width', '100%');
      
        // Change hover effects
        $("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
            $(this).css('border-bottom', '3px solid  #00A0EF').find('span.text').css('color', 'white');
        }, function () {
            $(this).css('border-bottom', 'red').find('span.text').css('color', 'white');
        });
        // Change Google's default blue border
        $("iframe").contents().find('.goog-te-menu2').css('border', 'none');

    
        // Change the iframe's size and position?
        $(".goog-te-menu-frame").css({
            'height': '91px',
            'width': '185px',
            'top': '86px',
			'-webkit-box-shadow' : 'none', 
			'-moz-box-shadow' : 'none', 
			'box-shadow' : 'none',
			'text-align' : 'left',
			'z-index': '1000',
			'background-color': '#0069BD'
			
        });
		
		  $(".goog-te-banner-frame").css({
       
			'z-index': '1000'
			
        });
		
        // Change iframes's size
        $("iframe").contents().find('.goog-te-menu2').css({
            'height': '100%',
            'width': '100%',
			'background-color': '#0069BD'
		
        });
    });
});

</script>

/* Navigation Bar */
.navbar {
   width: 90;
 
   text-align: center;
   height: 20px;
   padding: 35px;
   font-size: 10px;
   overflow: hidden;
    
}

.navbar a {
    float: left;
    font-size: 20px;
    text-align: center;
    padding: 12px 16px;
    text-decoration: none;
	color: #0069BD;
	font-family: Helvetica;
}
.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 20px;    
    border: none;
    outline: none;
    color: white;
    padding: 12px 16px;
    background-color: inherit;
    font-family: Helvetica;
    margin: 0;
	color: #0069BD;
	background: transparent;
}

.navbar a:hover, .dropdown:hover .dropbtn {
     border-bottom: 3px solid  #00A0EF;

}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #0069BD;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1000;
	font-size: 10px;
	 
}

.dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
	font-size: 17px; 
	
}
.dropdown-content a:hover {
 border-bottom: 3px solid  #00A0EF;
 color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

<div class="navbar">
         <a  href="Marvel_Tech.html">Home</a>
	     <div class="dropdown">
		 <button class="dropbtn">Services 
		     <i class="fa fa-caret-down"></i>
		</button>
		<div class="dropdown-content">
		  <a href="Services.html">Software</a>
		  <a href="#">Consulting</a>
		  <a href="#">Design</a>
		</div>
	  </div> 
	   <div class="dropdown">
		 <button class="dropbtn">Products 
		     <i class="fa fa-caret-down"></i> <! dropdown menu arrow>
		</button>
		<div class="dropdown-content">
		  <a href="Services.html">Software</a>
		  <a href="#">Consulting</a>
		  <a href="#">Design</a>
		</div>
	  </div> 

		<div class="dropdown">
	    	<div id="google_translate_element"></div> 
		</div>
</div>

标签： javascripthtmlcss