Googleマップライブラリのロードブロックページ

Question

私はGoogle MapsのAPIをロードするには、次のHTMLタグを使用します。スクリプトはによってロードされるまで

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

はしかし、それはHTMLでその下にありますロードし、すべてをブロックしていますブラウザ。

このロードをノンブロッキングにする方法はありますか？

Answer 1

はい、非同期に読み込むことができます。 http://code.google.com/apis/maps/documentation/javascript/basics.html#Async

Answer 2

このコードは、urlとオプションのコールバックをとる遅延関数を提供します。 ページのレンダリングをブロックせずにスクリプトを非同期に読み込みます。 私はプロテクションを入れているので、同じscritpを2回ロードしないので、好きなだけ何度でも呼び出すことができます。

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で機能します。