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

Я ищу очевидный способ для асинхронной загрузки следующих типов файлов JavaScript: "ядро" js файл (хм, позвольте нам просто назвать его, о, я не знаю, "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',
      '/js/jquery-1.4.2.min.js',
      '/js/jquery.color.js',
      '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");
});

У кого-либо есть какие-либо мысли о том, как Вы пошли бы об этом?Спасибо!

14
задан Kyle Simpson 19 May 2011 в 21:53
поделиться

4 ответа

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

5
ответ дан 1 December 2019 в 13:33
поделиться

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

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

1
ответ дан 1 December 2019 в 13:33
поделиться

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

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

0
ответ дан 1 December 2019 в 13:33
поделиться

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 и других ваших сценариев.

12
ответ дан 1 December 2019 в 13:33
поделиться
Другие вопросы по тегам:

Похожие вопросы: