3

I have three Javascript script that I need to load -

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

cd.js contains my functions that use imagesLoaded.js and lazyload-1.8.4.js.

Do load them altogether or separately?

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

            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');
            }
  • You can remove the two enqueues before cd because they are registered dependancies for that enqueue. Also, are you intending for these scripts to be loaded for every page? – t31os May 8 '13 at 16:55
9

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.

  • s_ha_dum thanks for your reply, my first attempt was a disaster. Your code broke my page but I got it working with the update - Code that Worked in a first post – Simon Cooper May 8 '13 at 15:51
  • Syntax error. Fixed it. Sorry about that. – s_ha_dum May 8 '13 at 15:54
  • Sorry still broken for me. Is there anything wrong with the way i got it working? – Simon Cooper May 8 '13 at 16:04
  • Ok... one of your scripts had a camel-case name so the dependency didn't work. Camel-case === horrific idea (imho) especially with letters like L and especially when not used consistently. Tested, the scripts do load. – s_ha_dum May 8 '13 at 16:11
  • 1
    @t3los : If you look at the source, wp_enqueue_script runs $wp_scripts->add just like wp_register_script does. They should be equivalent as far as dependency handling goes (as best I can tell). – s_ha_dum May 8 '13 at 17:28
4

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.

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

Timeline for Performance

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

  • Where is this get_template_directory_uri() comes from? I know the from WordPress PHP code base but not from JavaScript. – David Oct 25 '17 at 8:34
  • if you google it, you see this: developer.wordpress.org/reference/functions/… – user2116497 Nov 8 '17 at 7:06
  • Yes but your code sample is JavaScript. There's no function like this in JC, if I remember correctly. – David Nov 9 '17 at 8:46
  • What is JC? I didn't know.. – user2116497 Jul 5 '18 at 9:22
  • I meant JS as abbreviation for JavaScript. Just a typo. – David Jul 6 '18 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.