aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Marcos Fernandez me envia 2 noticias en las que podemos ver como cargar Google Analytics y Google Maps asincronamente. Ambas son herramientas que solemos usar en nuestras aplicaciones web y en algunas situaciones, pueden provocar retardos en la carga, así que tendremos que hacer algo.

Google Analytics

Se trata del sistema gestor de estadísticas gratuito por excelencia, y quizás debido a su uso es normal ese retardo de 2-3 segundos que produce al cargarse la página, para evitarlos simplemente tendremos que delegarlo al evento onload del navegador.

Marcos, nos muestra una implementación usando jQuery para controlar los eventos de la página.

  $(document).ready(function(){
      $.getScript('http://www.google-analytics.com/ga.js',function(){
         if (typeof(_gat) == 'object'){
            var pageTracker = _gat._getTracker('UA-XXXXXXX-Y');
            pageTracker._initData();
            pageTracker._trackPageview();
         }
      });
   });

Pero también podemos hacerlo sin necesidad de disponer de jQuery en nuestra aplicación. Para ello tendremos que usar una función como addLoadEvent() que nos permita añadir funcionalidades al evento onload con compatibilidad en todos los navegadores.

addLoadEvent(function(){
 // Insertamos el Código que Google Analytics
 var analyticsCode = 'UA-XXXXXXX-Y';

 var s = document.createElement("script");
 s.type = "text/javascript";
 s.src = "http://www.google-analytics.com/ga.js";
 s.onload = s.onreadystatechange = function() {
	if (typeof _gat  == 'object'){
            var pageTracker = _gat._getTracker(analyticsCode);
            pageTracker._initData();
            pageTracker._trackPageView();
         }
 }
 document.getElementsByTagName("head")[0].appendChild(s);
});

En ambos casos, debemos reemplazar (UA-XXXXXXX-Y) por el código que Google Analytics nos asigna.

Google Maps

La mayor aplicación de mapas de Internet y de la que salen más del 50% de los mashups de la red, es sin duda la que más problemas nos produce. Las largas esperas en Internet Explorer 6 mientras carga las imagenes harían desesperar a cualquiera, con el sistema propuesto por Marcos, seguro que podríamos paliar parte del problema.

function cargarMapa(){
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("MAPA"));
      map.setCenter(new GLatLng(39.578678,2.646021), 16);
   }
};

$(document).ready(function(){
   var api='AQUI TU GOOGLE MAPS API KEY';
   $.getScript('http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa');
});

La versión jQuery que Marcos nos ofrece podría reemplazarse para los que no usaran jQuery de la siguiente forma:

addLoadEvent(function(){

	var api='AQUI TU GOOGLE MAPS API KEY';

	function cargarMapa(){
	   if (GBrowserIsCompatible()) {
	      var map = new GMap2(document.getElementById("MAPA"));
	      map.setCenter(new GLatLng(39.578678,2.646021), 16);
	   }
	};

	var s = document.createElement("script");
	s.type = "text/javascript";
	s.src = 'http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa';
	document.getElementsByTagName("head")[0].appendChild(s);

})

En ambos ejemplos, debemos indicar la API KEY de Google Maps y el contenedor del mapa (MAPA).