根據需求加載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依賴關係

回答

相關問題