如何确定Google翻译是否加载？ [英] How to determine Google Translate was loaded?

问题描述

我的网页上有Google翻译。它看起来像一个下拉列表，但我的页面上的所有其他下拉列表都有其他样式。所以我创建了jQuery函数，它改变了Google Translator的下拉列表样式。此函数添加或删除一些样式参数。我想知道什么时候应该调用这个函数？在当前的代码中，我称之为3秒。 after document.ready

  $（document）.ready（function（）{
 setTimeout（wrapGoogleTranslate，3000）; 
}）; 
  

目前的情况是，我隐藏了Google翻译所在的Div，并在样式更正后显示通过我的功能。这意味着我的页面加载，然后它等待3秒钟，然后然后 Google翻译显示更正的样式。

我想知道如何确定Google翻译下拉列表被加载，然后调用我的函数来更改样式。我不想让用户等待3秒钟（也许在某些情况下Google Translate会加载超过3秒钟，那么我的功能将永远不会执行）。

解决方案

我最近想将选择语言改为简单的语言，所以我也必须在执行Google代码后运行代码。以下是我做的：

HTML

重要的是设置Google的 div to display：none - 我们将使用JavaScript褪色，以便用户看不到文本从选择语言切换到语言。

 < div id =google_translate_elementstyle =display：none; >< / DIV> 
< script type =text / javascript> function googleTranslateElementInit（）{new google.translate.TranslateElement（{pageLanguage：'en'，layout：google.translate.TranslateElement.InlineLayout.SIMPLE，gaTrack：true ，gaId：'UA-35158556-1'}，'google_translate_element'）;}< / script> 
< script type =text / javascriptsrc =// translate.google.com/translate_a/element.js?cb=googleTranslateElementInit\"></script> 
  

JavaScript

  function changeLanguageText（）{
 if（$（'。goog-te-menu-value span：first-child'）。text（）==选择语言 ）{
 $（'。goog-te-menu-value span：first-child'）。html（'Language'）; 
 $（'＃google_translate_element'）。fadeIn（'slow'）; 
} else {
 setTimeout（changeLanguageText，50）; 
} 
} 
 changeLanguageText（）; 
  

I have Google Translate on my page. It looks like a drop-down list, but all other drop-down lists on my page have another style. So I created jQuery function which change Google Translator drop down list styles. This function adds or deletes some style parameters. I'd like to know when I should call this function? In current code I call it after 3 sec. after document.ready

  $(document).ready(function () {
      setTimeout(wrapGoogleTranslate, 3000);
  });

Current situation is that I hide the Div where Google translate is placed and show it after it's styles are corrected by my function. It means that my page loads, then it wait for 3 seconds, and then Google Translate appears with corrected styles.

I'd like to know how I can determine that Google Translate drop-down was loaded and then call my function to change the style. I don't want to make users wait for 3 seconds (maybe in some situations Google Translate would loads more than 3 seconds, then my function would never be executed).

解决方案

I recently wanted to change "Select Language" to simply "Language", so I also had to run code after Google's code had been executed. Here's how I did it:

HTML

It's important to set Google's div to display:none -- we'll fade it in with JavaScript so that the user doesn't see the text switching from "Select Language" to "Language".

<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-35158556-1'}, 'google_translate_element');}</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

JavaScript

function changeLanguageText() {
  if ($('.goog-te-menu-value span:first-child').text() == "Select Language") {    
    $('.goog-te-menu-value span:first-child').html('Language');
    $('#google_translate_element').fadeIn('slow');
  } else {
    setTimeout(changeLanguageText, 50);
  }
}
changeLanguageText();

这篇关于如何确定Google翻译是否加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！