google.setOnLoadCallback与jQuery $（document）.ready（），可以混合吗？

Question

我正在使用Google Ajax API，他们建议我使用google.setOnLoadCallback()来完成与其API相关的各种事情，但我还使用jQuery的$(document).ready()来执行其他JS事情，与Google API无关。

将这两种方法混合在一个文档中安全吗？我没有注意到任何问题，但我认为这是一个规模问题。

Answer 1

你几乎必须要做到这一点：

google.setOnLoadCallback(function() { 
    $(function() { 
    // init my stuff 
    }); 
}); 

你不能这样做$(document).ready()没有$（jQuery对象）可用，所以需要进入回调中。并且您不能确定文档在回调内是否准备好，因此您也必须执行ready()。

Answer 2

如果你的JavaScript代码驻留在自己的js文件，而不是HTML文档中，你也可以做到这一点的文件中：

<script> 
     google.load("jquery", "1.7.0"); 
     google.load("jqueryui", "1.8.16"); 
     google.setOnLoadCallback(function() { 
      var script = document.createElement("script"); 
      script.setAttribute("type", "text/javascript"); 
      script.setAttribute("src", "my.js"); 
      document.getElementsByTagName("html")[0].appendChild(script); 
     }); 
</script> 

这会将所有my.js其他的东西，从谷歌加载之后。在你的my.js文件中，你可以做$(document).ready(...)。因此，您的应用程序代码独立于“由google加载”或“直接从您的服务器加载”。

Answer 3

对不起，从死亡中提出这个，但1）它仍然是作为这个问题的'答案'和2）我找到了一个更好的解决方案。

google.load函数上有一个可选的第三个参数，它带有一个配置选项对象。其中一个选项是callback。它也摆脱了需要单独拨打setOnLoadCallback的呼叫。

E.g.

google.load('visualization', '1.0', { 
    'packages': "charttype", 
    'callback': $jQ.proxy(me.setupChart, me) 
}); 

所以：

<script src="https://www.google.com/jsapi"></script> 
<script> 
$(document).ready(function() { 
    function mapsLoaded() { 
     etc etc etc 
    } 

    google.load("maps", "2", {"callback" : mapsLoaded}); 
}); 
</script> 

参见： https://developers.google.com/loader/#Dynamic

Answer 4

为什么混时，你可以用$(document).ready()做到这一切？只需摆脱google.setOnLoadCallback函数并使用jQuery的$(document).ready()即可。

此：

google.setOnLoadCallback(chartEnrollment); 

成为

$(document).ready(chartEnrollment);