cargando dependencias de Javascript a pedido

Question

Estoy seguro de que hay diferentes enfoques para este problema, y ​​puedo pensar en algunos. Pero me gustaría escuchar la opinión de otras personas sobre esto. Para ser más específico, he creado un widget que permite a los usuarios elegir su ubicación desde un mapa de Google Maps. Este widget se muestra bajo demanda y probablemente se utilizará cada 1 de cada 10 usos de la página donde se coloca. La forma más sencilla de cargar la dependencia para este widget (google maps js api) es colocar una etiqueta de script en la página. Pero esto haría que el navegador solicite ese script en cada carga de página. Estoy buscando una manera de hacer que el navegador solicite ese script solo cuando el usuario lo requiera para que se muestre el widget.

Answer 1

function loadJSInclude(scriptPath, callback) 
{ 
    var scriptNode = document.createElement('SCRIPT'); 
    scriptNode.type = 'text/javascript'; 
    scriptNode.src = scriptPath; 

    var headNode = document.getElementsByTagName('HEAD'); 
    if (headNode[0] != null) 
     headNode[0].appendChild(scriptNode); 

    if (callback != null)  
    { 
     scriptNode.onreadystagechange = callback;    
     scriptNode.onload = callback; 
    } 
} 

Y para usar (utilicé SWFObject como ejemplo):

var callbackMethod = function() 
{ 
    // Code to do after loading swfObject 
} 

// Include SWFObject if its needed 
if (typeof(SWFObject) == 'undefined')  
    loadJSInclude('/js/swfObject.js', callbackMethod); 
else 
    callbackMethod(); 

Answer 2

puede cargar el script dinámicamente agregando la etiqueta <script src="..."> al árbol DOM.

Answer 3

Es posible que desee echar un vistazo a jsloader: http://www.jsloader.com/

Answer 4

Gaia Ajax hace esto (lo sé desde que lo implementé - soy el fundador original) y ellos son GPL. Así que a menos que tengas miedo de que te demanden (ahora me están acusando de demandas legales), tal vez quieras comprobar cómo lo hacen. La tecnología básica es inyectar una etiqueta de script usando DOM cuando se necesita una secuencia de comandos. Aunque debe tener cuidado de NO hacer referencia a cosas en este archivo antes de que termine de cargarse (lo que ocurre de forma asincrónica)

La solución a ese problema (una solución) es agregar una variable en la parte inferior del archivo y usar recursivo setTimeout llama para verificar si la variable está definida y diferir la ejecución del código dependiendo del archivo que se está terminando de cargar hasta que se defina esa variable "archivo de archivo JS" ...

También realizamos un seguimiento de los archivos que se incluyen al agregar el valor hash de los nombres de archivo en un campo oculto en la página. Esto significa que nunca terminamos incluyendo el mismo archivo más de una vez ...

ingeniosa bonita en realidad ...

Answer 5

Las APIs de Google AJAX proporcionan la carga dinámica para las API de JavaScript de Google. No es un ejemplo de loading the Maps JS on-demand en la documentación:

function mapsLoaded() { 
    var map = new google.maps.Map2(document.getElementById("map")); 
    map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); 
} 

function loadMaps() { 
    google.load("maps", "2", {"callback" : mapsLoaded}); 
} 

Answer 6

Es posible que desee echar un vistazo a un verdadero DEMO en el sitio de bienes raíces.

En la página de demostración, simplemente haga clic en el enlace [Xem bản đồ] para ver el mapa cargado bajo demanda. El mapa se carga solo cuando se hace clic en el vínculo, no en el momento de la carga de la página, por lo que puede reducir el tiempo de descarga de la página.