асинхронная загрузка файлов js и других зависимых файлов js - PullRequest
Новая
       17

асинхронная загрузка файлов js и других зависимых файлов js

14 голосов
/ 06 мая 2010

Я ищу чистый способ асинхронной загрузки следующих типов файлов javascript: js-файл «core» (хмм, давайте просто назовем его, о, я не знаю, «jquery!», Ха-ха), x количество js-файлов, которые зависят от загружаемого «базового» js-файла, и y количество других не связанных js-файлов. У меня есть пара идей, как это сделать, но я не уверен, что это лучший способ. Я бы хотел избежать загрузки скриптов в теле документа.

Так, например, я хочу, чтобы следующие 4 файла javascript загружались асинхронно с соответствующим именем: 


/js/my-contact-page-js-functions.js // unrelated/independent script
/js/jquery-1.3.2.min.js // the "core" script
/js/jquery.color.min.js // dependent on jquery being loaded
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script

Но это не сработает, потому что не гарантируется, что jQuery будет загружен перед плагином цвета ... 


(function() {
    var a=[
      '/js/my-contact-page-functions.js',
      <b>'/js/jquery-1.4.2.min.js',
      '/js/jquery.color.js',</b>
      'http://cdn.thirdparty.com/third-party-tracking-script.js',
    ],
    d=document,
    h=d.getElementsByTagName('head')[0],
    s,
    i,
    l=a.length;
    for(i=0;i<l;i++){
        s=d.createElement('script');
        s.type='text/javascript';
        s.async=true;
        s.src=a[i];
        h.appendChild(s);
    }
})();

Разве практически невозможно загрузить jquery и плагин цвета асинхронно? (Поскольку плагин цвета требует, чтобы jQuery загружался первым.)

Первый метод, который я рассмотрел, - это просто объединить скрипт цветового плагина с исходным кодом jQuery в один файл.

Затем появилась еще одна идея - загрузить плагин цвета следующим образом: 


$(window).ready(function() {
    $.getScript("/js/jquery.color.js");
});

У кого-нибудь есть мысли о том, как бы вы поступили по этому поводу? Спасибо!

Ответы [ 5 ]

12 голосов
/ 06 мая 2010

LABjs сделано специально для этой проблемы. 

<script src="lab.js"></script>
<script>
  $LAB
    .script("jquery.js")
    .wait()
    .script("jquery.color.js")
    .script("jquery.otherplugin.js")
    .script("mylib.js")
    .wait()
    .script("unrelated1.js")
    .script("unrelated2.js");
</script>

Вы также можете поместить несвязанные скрипты в их собственную цепочку $LAB, если им действительно не нужно ждать jQuery и других ваших скриптов.

5 голосов
/ 08 мая 2010

LabJS и RequireJS - два популярных варианта сейчас. Они оба работают с jQuery, но используют несколько разные подходы, поэтому вы должны взглянуть на оба.

1 голос
/ 06 мая 2010

Вы можете использовать YUI Loader для регистрации своих собственных модулей и зависимостей и затем загружать их.

Вы получаете полные зацепки за успех, неудачу и даже прогресс, поэтому вы можете зацепить любое асинхронное действие, какое захотите.

0 голосов
/ 12 декабря 2010

Существует общий плагин JQuery, который загружает CSS и JS файлы асинхронно и синхронизировать см .: http://code.google.com/p/rloader/

0 голосов
/ 06 мая 2010

Вы не сможете достичь полностью асинхронной загрузки по той самой причине, о которой вы упомянули; зависимость.

Для моего 10p я бы следовал маршруту $ .getScript (). По сути, это просто оболочка для $ .ajax (), поэтому загрузка ваших скриптов таким образом даст вам асинхронную загрузку, к которой вы стремитесь.

...