如何在需求下加载相关文件+检查它们是否加载？

我试图实现我从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

如何在需求下加载相关文件+检查它们是否加载？

回答

相关问题