En attente d'un script chargé dynamiquement

Question

Dans le corps de ma page, je dois insérer ce code à la suite d'un appel AJAX:

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

Je ne peux pas utiliser $.load() car le document est déjà chargé, donc l'événement ne se déclenche pas.

Est-ce sûr? Sinon, comment puis-je m'assurer que le script jquery a été chargé avant mon code généré personnalisé est exécuté.

Answer 1

C'est assez sûr. Historiquement, <script> les balises bloquent complètement, d'où la deuxième <script> la balise ne peut pas être rencontrée avant que la première ait terminé l'analyse/l'excution. Le seul problème pourrait être que les navigateurs "modernes" ont tendance à charger les scripts de manière asynchrone et différée. Donc, pour vous assurer que l'ordre est correct, utilisez-le comme ceci:

<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>

Cependant, c'est probablement une meilleure idée d'utiliser l'insertion de balise de script dynamique au lieu de la pousser en tant que chaîne HTML dans le DOM. Ce serait la même histoire

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);

Answer 2

Ajoutez un ID à votre fichier de script pour pouvoir l'interroger.

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

Ensuite, ajoutez-y un écouteur de chargement en JavaScript

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

Answer 3

Il y a aussi une nouvelle fonctionnalité dans jQuery 1.6. Il s'appelle jQuery.holdReady(). Il est en fait explicite; lorsque vous appelez jQuery.holdReady(true), l'événement ready n'est pas déclenché tant que vous n'appelez pas jQuery.holdReady(false). Définir ce paramètre sur faux ne déclenchera pas automatiquement un événement prêt, il supprimera simplement la suspension.

Voici un exemple non bloquant de chargement d'un script extrait de la documentation:

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

Voir http://api.jquery.com/jQuery.holdReady/ pour plus d'informations

Answer 4

Attendez le chargement de plusieurs scripts

L'assistant suivant charge plusieurs scripts une seule fois et renvoie une promesse:

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 en amont: définition et tilisation .

Testé en chrome 75.