谷歌地图库加载会阻止页面答案

【问题标题】：Google Maps library loading blocks the page谷歌地图库加载会阻止页面
【发布时间】：2011-12-22 19:44:31
【问题描述】：

我使用以下 HTML 标记来加载 Google Maps API：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

但是，在浏览器加载脚本之前，它会阻止加载 HTML 中位于其下方的所有内容。

有没有办法让这个加载不阻塞？

【问题讨论】：

标签： javascript google-maps

【解决方案1】：

此代码为您提供了一个 defer 函数，该函数接受一个 url 和一个可选的回调。它异步加载您的脚本，而不会阻塞页面呈现。我已经设置了保护，因此它不会两次加载相同的脚本，因此您可以天真地调用它任意多次。

defer = (function () {
    var urls = [];

    return function (url, callback) {
        var inc;

        if (url && urls.indexOf(url) === -1) {
            inc = document.createElement('script');
            inc.async = true;
            inc.src = url;
            inc.onload = callback || function () {};
            document.getElementsByTagName('head')[0].appendChild(inc);
        }
    }
}());

defer('http://maps.google.com/maps/api/js?sensor=false');

这适用于任何在异步加载时不会失败的外部 javascript。

【讨论】：

感谢这个伟大的提示，但在这种情况下我宁愿使用“官方”方式
是一样的。我的只是给你一个可以加载任意网址而不是专门加载谷歌地图的功能。
@Munter 是否存在某些脚本的异步加载失败的情况？我问这个问题是关于你回答中的最后一行。

【解决方案2】：

是的，您可以异步加载它。查看文档的这一部分： http://code.google.com/apis/maps/documentation/javascript/basics.html#Async

【讨论】：

“Async”部分似乎已从文档中删除...查看this page，源代码包含谷歌地图库的异步加载示例