【问题标题】:Google AJAX Libraries CDN for jQuery用于 jQuery 的 Google AJAX 库 CDN
【发布时间】:2011-01-23 00:04:51
【问题描述】:

我有一个需要 SWFObject、jQuery 和 Google Maps API 的页面。 我认为我可以利用使用的好处:

<script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
<script type="text/javascript">
    google.load("jquery", "1.4.1");
    google.load("swfobject", "2.2");
    google.load('maps', '2', {'callback': googleMapSetup });
</script>

但现在我在某处读到 (http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/) 我需要使用

google.setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()
});

而不是 $(document).ready().. 这是真的吗?

【问题讨论】:

    标签: jquery document-ready google-ajax-libraries


    【解决方案1】:

    有两种使用 Ajax 库 API 的方法。

    首先,您可以使用 Google 来托管您的 jQuery 文件:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    

    其次,您可以使用它来执行 jQuery 的异步加载,这就是您所指的。如果你这样做,模式是:

    <script type="text/javascript" src="http://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>
    <script type="text/javascript">
      google.load("jquery", "1.4.2");
      google.load("swfobject", "2.2");
      google.load('maps', '2', {'callback': googleMapSetup });
      google.setOnLoadCallback(function() {
        $(function() {
          // Place init code here instead of $(document).ready()
        });
      });
    </script>
    

    你必须使用google.setOnLoadCallback()的原因是因为在这种情况下加载jQuery是异步的,所以你需要等待jQuery被加载准备好文档。

    您必须在加载回调中使用 jQuery 的原因是,在您运行 Javascript 时它可能不会在其他任何地方加载,从而导致潜在的竞争条件和间歇性错误。

    【讨论】:

    • 是的,但我不能在第二个选项中使用 $(document).ready() 了?
    • @FFish:如果你在加载回调之外执行$(function() { ... },jQuery 可能还没有加载,导致 JS 错误。
    • 你能告诉我,$(function(){}) 到底是什么?我总是把我所有的代码,所有的函数和一切都放在 doc.ready 中,因为我是一只猴子。
    • @FFish: $(function() { ... }); 等价于$(document.ready(function() { ... });。这意味着在文档“准备就绪”时运行该代码,这意味着已加载标记但尚未加载图像。见api.jquery.com/ready
    • 还有一个问题.. 我如何使用 google.setOnLoadCallback 来加载我的外部 .js 文件和 jQuery 代码?
    猜你喜欢
    • 2011-06-05
    • 2012-03-06
    • 1970-01-01
    • 2013-04-26
    • 2011-05-02
    • 2010-10-23
    • 2011-09-23
    • 2012-11-06
    • 2012-09-18
    相关资源
    最近更新 更多