如何在需求下加載相關文件+檢查它們是否加載？

我試圖實現我從24Ways.org上的一篇舊文章中找到的資產/依賴項加載器。你們大多數人可能會熟悉它。這是從這篇文章由基督教海爾曼：如何在需求下加載相關文件+檢查它們是否加載？

http://24ways.org/2007/keeping-javascript-dependencies-at-bay

我修改了腳本加載CSS文件以及。現在已經非常接近我想要的了。但是我仍然需要做一些檢查，看看資產是否已經完全加載。

只是想知道，如果你們有什麼想法:)

這裏就是我的劇本目前看起來像：

var assetLoader = { 
    assets: { 
    products: { 
     js: 'products.js', 
     css: 'products.css', 
     loaded: false 
    }, 
    articles: { 
     js: 'articles.js', 
     css: 'articles.css', 
     loaded: false 
    }, 

    [...] 

    cycle: { 
     js: 'jquery.cycle.min.js', 
     loaded: false 
    }, 
    swfobject: { 
     js: 'jquery.swfobject.min.js', 
     loaded: false 
    } 
    }, 
    add: function(asset) { 
    var comp = assetLoader.assets[asset]; 
    var path = '/path/to/assets/'; 

    if (comp && comp.loaded == false) { 
     if (comp.js) { 
     // load js 
     var js = document.createElement('script'); 
     js.src = path + 'js/' + comp.js; 
     js.type = 'text/javascript'; 
     js.charset = 'utf-8'; 
     // append to document 
     document.getElementsByTagName('body')[0].appendChild(js); 
     } 
     if (comp.css) { 
     // load css 
     var css = document.createElement('link'); 
     css.rel = 'stylesheet'; 
     css.href = path + 'css/' + comp.css; 
     css.type = 'text/css'; 
     css.media = 'screen, projection'; 
     css.charset = 'utf-8'; 
     // append to document 
     document.getElementsByTagName('head')[0].appendChild(css); 
     } 
    } 
    }, 
    check: function(asset) { 
    assetLoader.assets[asset].loaded = true; 
    } 
}

基督教解釋了他的非常詳細的文章此方法。我不想再迷惑你們與我的英文不好：P

這裏有一個如何我運行該腳本的例子：

... 

// load jquery cycle plugin 
if (page=='tvc' || page=='products') { 
    if (!assetLoader.assets.cycle.loaded) { 
    assetLoader.add('cycle'); 
    } 
} 
// load products page assets 
if (!assetLoader.assets.products.loaded) { 
    assetLoader.add('products'); 
} 

...

這種做法很有問題，雖然。 Coz資產異步加載，這意味着products.js內的一些代碼依賴於jquery.cycle.js的代碼可能會在jquery.cycle.js甚至加載之前繼續運行，從而導致錯誤。

雖然我很清楚腳本可以附加一個onload事件，但我真的不知道如何實現它到我的腳本。任何人都在意幫助我？請...：P

來源

2010-04-07 RZKY

爲什麼要重新發明輪子？ Dojo內置了dojo.require，jQuery擁有Include插件。

對於CSS，請按照正常情況將其縮小並加載。這使得事情變得更簡單，並且加載時間不太可能太昂貴。

來源

2010-04-07 20:47:07

你可能是對有關CSS，他們的總大小組合和gzip壓縮的是大約30 KB。也許我正在優化這個。我會看看那些你找到的參考。多謝。我也在這裏找到了一個可能有用的線程。發現一些有趣的鏈接:) http://stackoverflow.com/questions/2043799/javascriptlazy-loading-and-dependency-resolution – RZKY 2010-04-08 03:30:13

對於您可以使用$.getScript js文件，它提供了一個回調選項，以便您可以鏈上的負載，即：

$.getScript('jquery.cycle.js',function(){ 
    $.getScript('products.js'); 
});

來源

2010-04-07 20:50:43

如何在需求下加載相關文件+檢查它們是否加載？

回答

相關問題