Question

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

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

然而，在浏览器加载脚本之前，它阻止加载HTML下面的所有内容。

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

Answer 1

此代码为您提供了一个带有url和可选回调的延迟函数。它异步加载您的脚本而不阻止页面呈现。我已经提供了保护，所以它不会加载相同的scritp两次，所以你可以随心所欲地多次调用它。

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。

Answer 2

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

Google地图库加载会阻止该页面

2 个答案: