it-swarm.com.de

Laden Sie mehrere Javascript-Skripte

Ich habe drei Javascript-Skripte, die ich laden muss -

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

cd.js enthält meine Funktionen, die imagesLoaded.js und lazyload-1.8.4.js verwenden.

Laden Sie sie zusammen oder getrennt?

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, der funktioniert hat

            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');
            }
3
Simon Cooper

Ich habe diesen Code so gut ich konnte formatiert und einmal formatiert ist er offensichtlich sehr kaputt. wp_enqueue_script benötigt 5 Parameter. Sie haben 9. Und einige der ersten fünf sind falsch. Ich erwarte, dass Sie Fehler sehen würden, wenn Sie Debugging aktiviert hätten .

Sie scheinen zu versuchen, alle Ihre Skripte im selben wp_enqueue_script in die Warteschlange zu stellen. Das kannst du nicht machen. Vielleicht ist es das, was Sie fragen, aber die Frage ist nicht schrecklich klar.

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

Ich habe auch imagesloaded und lazyload als Abhängigkeiten für cd hinzugefügt, was ich für richtig halte. Ich weiß nicht, ob imagesloaded von lazyload abhängt oder umgekehrt, aber wenn Sie sich registrieren/einreihen (wie Sie sollten), dann nutzen Sie die Abhängigkeits-Jonglage richtig. Das ist eines der besten Dinge am System.

9
s_ha_dum

Als Folge der Antwort von @ s_ha_dum könnten Sie auch Skripte mit hierarchisch deklarierten Abhängigkeiten registrieren und dann nur einreihen Ihr ultimatives Skript. So ähnlich:

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

Funktional macht es wirklich keinen Unterschied; Es ist meistens eine Frage der Präferenz. Ich möchte alle Abhängigkeiten explizit für jedes Skript deklarieren, aber diese Methode ist etwas kürzer.

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())}

In meinem Fall wartet cd.js, bis lazyload-1.8.4.js geladen ist. Aber lazyload-1.8.4.js wartet nicht auf das Laden von imagesLoaded.js. Daher wartet cd.js auch nicht auf imagesLoaded.js, da zwischen ihnen keine Kette besteht.

Ich benutze dies in meinem Code, es funktioniert aber nicht so schnell.

onLoadInit.js Datei in GitHub , verwende ich die gleiche Logik.

 Timeline for Performance 

Wenn Sie mehr Geschwindigkeit benötigen, sollten Sie Promise, CustomEvent, verwenden

0
user2116497