根据需求加载javascript依赖关系

我确定这个问题有不同的方法，我可以想一些。但我想听听其他人对此的看法。更具体地说，我已经构建了一个小部件，允许用户从谷歌地图地图中选择他们的位置。这个小部件按需显示，并且可能每10分之一用于它所在的页面。加载这个小部件（谷歌地图js api）的依赖关系的最简单方法是在页面中放置一个脚本标签。但是这会使浏览器请求每个页面上的脚本加载。我正在寻找一种方法来让浏览器只在用户需要显示小部件时才请求该脚本。根据需求加载javascript依赖关系

来源

2008-11-21 Vasil

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

，并使用（我用SwfObject的为例）：

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

来源

2008-11-22 00:01:30 FlySwat

您可以通过将<script src="...">标记添加到DOM树来动态加载脚本。

来源

2008-11-21 23:59:39 miceuz

你可能想看看jsloader：http://www.jsloader.com/

来源

2008-11-22 00:05:09 jdigital

盖亚阿贾克斯做到这一点（我，因为我知道实现它 - 我是最初的创始人），他们是GPL。所以除非你害怕他们会起诉你（他们现在正在诉讼我），你可能想看看他们是如何做到的。基本技术是在需要脚本时使用DOM注入脚本标记。虽然在加载完成之前，您必须注意不要引用此文件中的内容（这是异步发生的）

解决该问题（一种解决方案）是在文件底部添加一个变量并使用递归setTimeout调用来检查变量是否被定义，并推迟代码的执行，取决于正在加载的文件，直到定义了“JS文件的底部”变量为止...

我们实际上还跟踪了哪些文件在哪里被附加文件名的哈希值转换为页面上的隐藏字段。这意味着我们永远不会结束，包括相同的文件，曾多次...

其实非常漂亮......

来源

2008-11-22 00:51:11

毕竟你写了推广它的博客垃圾，他们起诉你？ – FlySwat 2008-11-22 01:28:15

的谷歌AJAX API提供谷歌的的JavaScript API动态加载。还有的文档中loading the Maps JS on-demand一个例子：

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

来源

2009-03-02 21:02:39

您可能要承担楼盘现场看看一个真实的DEMO。

在演示页面上，只需点击链接[Xembảnđồ]即可查看按需加载的地图。仅当链接被点击时才加载地图，而不是页面加载时，因此它可以减少页面下载时间。

来源

2010-10-20 04:14:14 proeis

根据需求加载javascript依赖关系

回答

相关问题