10

我确信有不同的方法来解决这个问题，我可以想到一些。但我想听听其他人对此的看法。更具体地说，我构建了一个小部件，允许用户从谷歌地图中选择他们的位置。这个小部件是按需显示的，并且可能每 10 次使用它所在的页面就会被使用一次。加载此小部件的依赖项（google maps js api）的最简单方法是在页面中放置一个脚本标记。但这会使浏览器在每个页面加载时都请求该脚本。我正在寻找一种方法，使浏览器仅在用户需要显示小部件时才请求该脚本。

4

6 回答 6

17 
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-22T00:01:30.690 回答
1

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

于 2008-11-22T00:05:09.547 回答
1

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

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

实际上，我们还通过将文件名的散列值附加到页面上的隐藏字段中来跟踪包含哪些文件。这意味着我们永远不会不止一次地包含同一个文件......

其实蛮好看的...

于 2008-11-22T00:51:11.480 回答
1

您可能想看看房地产网站上的真实演示。

在演示页面上，只需单击链接 [Xem bản đồ] 即可查看按需加载的地图。地图只在点击链接时加载，而不是在页面加载时加载，这样可以减少页面下载时间。

于 2010-10-20T04:14:14.323 回答
0

Google AJAX API 为 Google 的 JavaScript API 提供动态加载。文档中有一个按需加载 Maps JS的示例：

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-02T21:02:39.580 回答
-1

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

于 2008-11-21T23:59:39.633 回答