chargement des dépendances javascript sur demande

Question

Je suis sûr qu'il existe différentes approches à ce problème, et je peux y penser. Mais j'aimerais entendre l'opinion des autres à ce sujet. Pour être plus précis, j'ai construit un widget qui permet aux utilisateurs de choisir leur emplacement à partir d'une carte google maps. Ce widget est affiché à la demande et sera probablement utilisé toutes les 1 utilisations sur 10 de la page où il est placé. Le moyen le plus simple de charger la dépendance pour ce widget (google maps js api) est de placer une balise script dans la page. Mais cela amènerait le navigateur à demander ce script sur chaque page. Je cherche un moyen de faire que le navigateur ne demande ce script que lorsque l'utilisateur a besoin que le widget soit affiché.

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; 
    } 
} 

Et utiliser (je SWFObject comme exemple):

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

Vous pouvez charger le script dynamiquement en ajoutant <script src="..."> à l'arborescence DOM.

Answer 3

Vous pouvez jeter un oeil à jsloader: http://www.jsloader.com/

Answer 4

Gaia Ajax fait cela (je sais que je mis en œuvre - je suis le fondateur original) et ils sont GPL. Donc, à moins que vous ayez peur qu'ils vous poursuivent en justice (ils me foudrament avec des poursuites maintenant), vous pourriez vouloir vérifier comment ils le font. La technologie de base consiste à injecter une balise de script en utilisant DOM lorsque le script est nécessaire. Bien que vous devez prendre soin de ne pas référencer des choses dans ce fichier avant qu'il ne soit fini de charger (qui se produit de manière asynchrone)

La solution à ce problème (une solution) est d'ajouter une variable au bas du fichier et d'utiliser récursive Appelez setTimeout pour vérifier si la variable est définie et différer l'exécution du code en fonction du chargement du fichier jusqu'à ce que la variable "bottom of JS file" soit définie ...

Nous avons également suivi les fichiers inclus en ajoutant la valeur hachée des noms de fichiers dans un champ caché sur la page. Cela signifie que nous ne sommes retrouvés, y compris le même fichier plus d'une fois ...

nifty Jolie en fait ...

Answer 5

Les API Google AJAX fournissent une charge dynamique pour les API JavaScript de Google. Il est un exemple de loading the Maps JS on-demand dans la documentation:

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

Vous pouvez jeter un oeil à un vrai DEMO sur le site de l'immobilier.

Sur la page de démonstration, cliquez simplement sur le lien [Xem bản đồ] pour voir la carte chargée sur demande. La carte est chargée uniquement lorsque le lien est cliqué pas au moment du chargement de la page, de sorte qu'il peut réduire le temps de téléchargement de la page.