2011-12-22 37 views
5

utilizo la siguiente etiqueta HTML para cargar el API de Google Maps:mapas de Google carga de bibliotecas no bloquea el página

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

Sin embargo, se está bloqueando el todo la carga que está debajo de ella en el código HTML hasta que el script se carga por el navegador.

¿Hay alguna forma de que esta carga sea no bloqueante?

Respuesta

3

Sí, puede cargarlo de forma asíncrona. Echa un vistazo a esta parte de la documentación: http://code.google.com/apis/maps/documentation/javascript/basics.html#Async

+2

Parece que la sección "Async" ha sido eliminada de la documentación ... Mirando [esta página] (https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple- asincrónico), la fuente contiene una muestra de carga asincrónica de la biblioteca de Google Maps –

4

Este código le da una función de aplazamiento que toma una URL y una devolución de llamada opcional. Carga de forma asíncrona su secuencia de comandos sin bloquear el procesamiento de páginas. He puesto una protección para que no cargue el mismo scritp dos veces, por lo que puede llamarlo ingenuamente tantas veces como quiera.

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

Esto funciona para cualquier javascript externo que no falle en la carga asincrónica.

+0

Gracias por este gran consejo, pero prefiero usar la forma "oficial" en este caso –

+0

. Es lo mismo. El mío solo te da una función que puede cargar URL arbitrarias en lugar de google maps de manera específica. – Munter

+0

@Munter ¿Hay alguna situación en la que la carga asíncrona falle en algunos scripts? Estoy haciendo esta pregunta con respecto a su última línea en su respuesta. –

Cuestiones relacionadas