Как загрузить зависимые файлы по требованию + проверить, загружены они или нет? - PullRequest
Новая
       12

Как загрузить зависимые файлы по требованию + проверить, загружены они или нет?

0 голосов
/ 07 апреля 2010

Я пытаюсь реализовать загрузчик ресурсов / зависимостей, который я нашел в старой статье на 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

Ответы [ 2 ]

1 голос
/ 08 апреля 2010

Для файлов js вы можете использовать $.getScript, он предоставляет опцию обратного вызова, поэтому вы можете чередовать загрузку, т.е.: 

$.getScript('jquery.cycle.js',function(){ 
    $.getScript('products.js'); 
});
0 голосов
/ 08 апреля 2010

Зачем изобретать велосипед? В Dojo это встроено с dojo.require, а в jQuery есть плагин Include .

Что касается CSS, минимизируйте и загрузите его заранее, как обычно. Это упрощает работу и вряд ли будет слишком дорогостоящим во время загрузки.

...