Load multiple Javascript scripts

3 comments

1. I formatted that code as best I could, and once formatted it is obviously very broken. wp_enqueue_script takes 5 parameters. You have 9. And several of the first five are wrong. I expect that you would see errors if you had debugging enabled.

   You seem to be trying to enqueue all of your scripts in the same wp_enqueue_script. You can’t do that. Perhaps that is what you are asking, but the question isn’t terribly clear.

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

   I also added imagesloaded and lazyload as dependencies for cd, which I think is correct. I don’t know if imagesloaded is dependent upon lazyload or the other way around but if you are going to register/enqueue (as you should) then make proper use of the dependency juggling. That is one of the best things about the system.

2. As a corollary to @s_ha_dum’s answer, you could also register scripts with hierarchically declared dependencies, and then just enqueue your ultimate script. Something like so:

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

   Functionally, it really makes no difference; it’s mostly a matter of preference. I like to declare all dependencies explicitly for each script, but this method is a bit more shorthand.

3. 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 my case, cd.js will wait till lazyload-1.8.4.js loaded. But, lazyload-1.8.4.js won’t wait for imagesLoaded.js load. So, cd.js won’t wait for imagesLoaded.js too, because there is no chain between them.

   I use this in my code, it works but not so fast.

   onLoadInit.js File in GitHub
   , i use the same logic.

   

   If you need more speed, I think you should use Promise, CustomEvent

Comments are closed.