Question

Why is Jquery being deferred and how do I turn it back on

I’m having some issues with photos not loading/rendering correctly on my site. The theme admins believe it might have something to do with Jquery being deferred. The only info I could find on this issue was here and it wasn’t very helpful. The part I find confusing is how it got deferred in the first place, I don’t remember doing this. Is it a default setting within DO droplets?

Subscribe
Share

Submit an answer
You can type!ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Thank you very much @jtittle for the in depth and detailed response.

You are correct in assuming it is a WordPress installation (to be exact it is the Ubuntu 14.0.4, Apache, MySQL, WP prefab’d by DO) and I am running the W3 Total Cache plugin. I was also using Speed Booster Pack (SBP) too. However, that plugin hadn’t been updated in 10 months and the settings page looked pretty wonky so I deactivated it (SBP not W3TC). The SBP plugin was deferring scripts but the interface was all messed up (most likely due to it not having been updated in 10 months) and so I couldn’t tell which scripts it was deferring.

As you suggested I looked at the source code (after deactivating SBP) and didn’t see

<script defer src="...."></script>

or

<script async src="...."></script>

Perhaps deactivating SBP fixed the issue of deferring Jquery?

On a side note I’ve noticed that W3TC is minifying CSS, HTML, & Javascript. I’ve asked the admins @KadenceThemes if I should change that to not include minifying Javascript (it is too bad that only members can see the forum). When I hear back from them I will post here so that others may have a possible solution if they run into this problem.

@IsaacT8

The contents of the post @ KadenceThemes, other than the OP, is restricted to members only, so we can’t see what others have said :-).

That said, since this seems to be a WordPress installation (please correct me if I’m wrong), do you by chance have a caching plugin installed (such as W3 Total Cache, WP Super Cache etc)?

If yes, jQuery is often minified / compressed and if not by default (as per your theme configuration), the plugin will often place .js files in the footer. An async or defer tag could be added to the call as well in an attempt to speed up page loads.

If you see:

<script defer src="...."></script>

or

<script async src="...."></script>

… in your HTML source code / output (when viewing the page source), chances are this is where the issue is.

Adding to the stack, WordPress also prioritizes their own packaged version of jQuery over yours (if you’ve defined a custom version without using a plugin that auto-replaces the instance for you). This means that you’ll often have to use another identifier when calling jQuery functions.

What I mean by this is that you may run in to issues using $ when calling jQuery functions. Instead, you’d need to use something such as:

jQuery( document ).ready( function() {
    ....
});

instead of:

$( document ).ready( function() {
    ....
});

While I do like WordPress, they do things a little differently than you’d expect in some cases; this is one of them.

That said, even with the DigitalOcean WordPress image (if that’s what you’re using), you’re running a stock installation on a Droplet (VPS) that is configured specifically to run WordPress, with nothing more (and nothing less, of course :-)). The Droplet, OS and stock installation would not contribute to this sort of an issue.