Ожидание динамически загружаемого script

Ответ 1

Это довольно безопасно. Исторически теги <script> являются полными блокировками, поэтому второй тег <script> не может быть встречен, поскольку первый закончил синтаксический анализ /exclusion. Только проблема может заключаться в том, что "современные" браузеры, как правило, загружают сценарии асинхронно и откладываются. Поэтому, чтобы убедиться, что порядок верен, используйте его следующим образом:

<p>Loading jQuery</p>
<script type='text/javascript' async=false defer=false src='scripts/jquery/core/jquery-1.4.4.js'></script>
<p>Using jQuery</p>
<script type='text/javascript'>
    $.ajax({
        ...
    });
</script>

Однако, вероятно, лучше использовать динамическую вставку тега script вместо того, чтобы нажимать эту строку HTML в DOM. Будет ли такая же история

var scr  = document.createElement('script'),
    head = document.head || document.getElementsByTagName('head')[0];
    scr.src = 'scripts/jquery/core/jquery-1.4.4.js';
    scr.async = false; // optionally

head.insertBefore(scr, head.firstChild);

Ответ 2

Добавьте идентификатор в свой script файл, чтобы его можно было запросить.

<script id="hljs" async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>

Затем добавьте к нему загрузочный прослушиватель в JavaScript

<script>
  var script = document.querySelector('#hljs');
  script.addEventListener('load', function() {
    hljs.initHighlightingOnLoad(); 
  });
</script>

Ответ 3

В jQuery 1.6 есть новая функция. Он называется jQuery.holdReady(). Это на самом деле самоочевидно; когда вы вызываете jQuery.holdReady(true), событие ready не запускается, пока вы не вызовете jQuery.holdReady(false). Установка этого параметра в false не будет автоматически запускать готовое событие, оно просто удаляет трюм.

Ниже приведен неблокирующий пример загрузки script из документации:

$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});

Подробнее о http://api.jquery.com/jQuery.holdReady/

Ответ 4

Подождите, пока загрузятся несколько скриптов

Следующий помощник загружает несколько сценариев только один раз и возвращает обещание:

async function cirosantilli_load_scripts(script_urls) {
    function load(script_url) {
        return new Promise(function(resolve, reject) {
            if (cirosantilli_load_scripts.loaded.has(script_url)) {
                resolve();
            } else {
                var script = document.createElement('script');
                script.onload = resolve;
                script.src = script_url
                document.head.appendChild(script);
            }
        });
    }
    var promises = [];
    for (const script_url of script_urls) {
        promises.push(load(script_url));
    }
    await Promise.all(promises);
    for (const script_url of script_urls) {
        cirosantilli_load_scripts.loaded.add(script_url);
    }
}
load_scripts.loaded = new Set();

(async () => {
    await cirosantilli_load_scripts([
        'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js',
        'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js',
    ]);

    // Now do stuff with those scripts.

})();

GitHub upstream: определение и использование.

Испытано в Chromium 75.

Ответ 5

$. ajax и $.load - одно и то же. Вы также можете использовать. Если вы поместите $.load в тег script на странице, он загорится, когда он загрузится так же, как $.ajax().

Когда дело доходит до ожидания script, чтобы стрелять, прежде чем делать что-то, что сказал Томалак, справедливо. Исключение составляют асинхронные вызовы. Javascript выполнит вызов AJAX, затем продолжит работу script, и когда ответ AJAX отвечает, он запустит успех/сбой в зависимости от того, что вы ему скажете.

Теперь скажите, что вы хотите, чтобы ваш JS дождался возвращения, с одним вызовом довольно легко просто обернуть каждую вещь в обратном вызове успеха, или вы можете сделать это круто и использовать $.deferred. Это позволяет вам создавать кучу ajax-вызовов или один, а затем запускать некоторый код только после финиша.

$. Когда и $. то, вероятно, лучше всего подходят для этой ситуации.

В любом случае, что вы делаете, это безопасно.