Google Maps ładowanie biblioteki blokuje stronę

Question

używam następujący tag HTML, aby załadować API Google Maps:

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

jednak blokuje załadunku wszystko, co znajduje się pod nim w HTML aż skrypt zostanie załadowany przez przeglądarka.

Czy istnieje sposób na to, aby ładowanie nie było blokowane?

Answer 1

Tak, możesz załadować urządzenie asynchronicznie. Sprawdź tę część dokumentacji: http://code.google.com/apis/maps/documentation/javascript/basics.html#Async

Answer 2

Ten kod udostępnia funkcję odroczenia, która pobiera adres URL i opcjonalne wywołanie zwrotne. Asynchronicznie ładuje skrypt bez blokowania renderowania strony. Włożyłem zabezpieczenie, aby nie ładowało tego samego skruszenia dwukrotnie, więc możesz naiwnie nazwać to tyle razy, ile chcesz.

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'); 

Działa to dla dowolnego zewnętrznego javascript, który nie zawodzi podczas ładowania asynchronicznego.