web-dev-qa-db-fra.com

Charger plusieurs scripts Javascript

J'ai trois scripts Javascript que je dois charger -

  • imagesLoaded.js
  • lazyload-1.8.4.js
  • et cd.js

cd.js contient mes fonctions qui utilisent imagesLoaded.js et lazyload-1.8.4.js.

Les chargez-vous complètement ou séparément?

function add_my_script() {
  wp_enqueue_script(
    'imagesLoaded',
    get_template_directory_uri() . '/js/imagesLoaded.js', 
    array('jquery'),
    'lazyload',
    get_template_directory_uri() . '/js/lazyload-1.8.4.js',
    array('jquery'),
    'cd',
    get_template_directory_uri() . '/js/cd.js',
    array('jquery')                     
  );
}   
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Code qui a fonctionné

            add_action( 'wp_enqueue_scripts', 'add_my_script' );

            function add_my_script() {
                wp_register_script('imagesLoaded',get_template_directory_uri() . '/js/imagesLoaded.js', array('jquery'),true);
                wp_register_script('lazyload',get_template_directory_uri() . '/js/lazyload-1.8.4.js', array('jquery'),true);
                wp_register_script('cd',get_template_directory_uri() . '/js/cd.js', array('jquery','imagesLoaded','lazyload'),true);
                wp_enqueue_script('imagesLoaded');
                wp_enqueue_script('lazyload');
                wp_enqueue_script('cd');
            }
javascriptwp-enqueue-script
3
Simon Cooper

J'ai formaté ce code du mieux que je pouvais, et une fois formaté, il est évidemment très endommagé. wp_enqueue_script prend 5 paramètres. Vous en avez 9. Et plusieurs des cinq premiers ont tort. Je suppose que vous verriez des erreurs si vous aviez le débogage activé .

Vous semblez essayer de mettre tous vos scripts en file d'attente dans le même wp_enqueue_script. Tu ne peux pas faire ça. C'est peut-être ce que vous demandez, mais la question n'est pas très claire.

function add_my_script() {
  wp_enqueue_script(
    'imagesLoaded',
    get_template_directory_uri() . '/js/imagesLoaded.js', 
    array('jquery')
  );
  wp_enqueue_script(
    'lazyload',
    get_template_directory_uri() . '/js/lazyload-1.8.4.js',
    array('jquery')
  );
  wp_enqueue_script(
    'cd',
    get_template_directory_uri() . '/js/cd.js',
    array('jquery','imagesLoaded','lazyload')                     
  );
}   
add_action( 'wp_enqueue_scripts', 'add_my_script' );

J'ai également ajouté imagesloaded et lazyload en tant que dépendances pour cd, ce qui, à mon avis, est correct. Je ne sais pas si imagesloaded dépend de lazyload ou l'inverse, mais si vous allez vous enregistrer/mettre en file d'attente (comme il se doit), utilisez correctement le jonglage des dépendances. C'est l'une des meilleures choses à propos du système.

9
s_ha_dum

En corollaire à la réponse de @ s_ha_dum, vous pouvez également enregistrer des scripts avec des dépendances déclarées de manière hiérarchique, puis simplement mettre en file d'attente votre script ultime. Quelque chose comme ça:

function add_my_script() {

    // Register first script, dependent on jQuery
     wp_register_script(
         'imagesLoaded',
         get_template_directory_uri() . '/js/imagesLoaded.js', 
         array( 'jquery' )
     );

    // Register second script, dependent on first script
     wp_register_script(
         'lazyload',
         get_template_directory_uri() . '/js/lazyload-1.8.4.js',
         array( 'imagesLoaded' )
      );

    // Enqueue third script, dependent on second script
     wp_enqueue_script(
         'cd',
         get_template_directory_uri() . '/js/cd.js',
         array( 'lazyload' )                     
     );
}   
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Fonctionnellement, cela ne fait vraiment aucune différence. c'est surtout une question de préférence. J'aime déclarer toutes les dépendances explicitement pour chaque script, mais cette méthode est un peu plus abrégée.

4
Chip Bennett
var scrArr = [
    [ get_template_directory_uri() . '/js/imagesLoaded.js',false],
    [ get_template_directory_uri() . '/js/lazyload-1.8.4.js',true],
    [ get_template_directory_uri() . '/js/cd.js',true]
];

var scrArrSrl = []; // js Serial   Load Array
var scrArrPrl = []; // js Parallel Load Array

while (scrArr.length) {
    var scrArrEl = scrArr.shift();
    if (scrArrEl[1]) {
        scrArrSrl.Push(scrArrEl[0]);
    } else {
        scrArrPrl.Push(scrArrEl[0]);
    }
}

creScrSrl = function(src,id,par,typ) {
    id = id || src.split('/').pop().split('.').slice(0,-1).join('.');
    var newScr = document.getElementById(id);
    if (!newScr) {
        newScr = document.createElement('script');
        newScr.id=id;
        if (!!typ) {newScr.type = typ};
        newScr.src = src;
        par = par || document.head;
        newScr.onload = function () {
            if (scrArrSrl.length) {creScrSrl(scrArrSrl.shift())}
        }
        par.appendChild(newScr);
    } 
}

creScrPrl = function(src,id,par,typ) {
    id = id || src.split('/').pop().split('.').slice(0,-1).join('.');
    var newScr = document.getElementById(id);
    if (!newScr) {
        newScr = document.createElement('script');
        newScr.id=id;
        if (!!typ) {newScr.type = typ};
        newScr.src = src;
        par = par || document.head;
        par.appendChild(newScr);
    } 
}

creScrSrl(scrArrSrl.shift());

while (scrArrPrl.length) {creScrPrl(scrArrPrl.shift())}

Dans mon cas, cd.js attendra que lazyload-1.8.4.js soit chargé. Cependant, lazyload-1.8.4.js n'attendra pas le chargement de imagesLoaded.js. Donc, cd.js n'attendra pas non plus imagesLoaded.js, car il n'y a pas de chaîne entre eux.

J'utilise ceci dans mon code, cela fonctionne mais pas si vite.

Fichier onLoadInit.js dans GitHub , j'utilise la même logique.

 Timeline for Performance 

Si vous avez besoin de plus de vitesse, je pense que vous devriez utiliser Promise, CustomEvent

0
user2116497