defer="defer" is preventing javascripts from working

colak · 2015-05-13 10:03:04

Does anybody know why my jquery scripts stopped working after I added defer="defer".
This is how I use them

<script defer="defer" src="http://neme-imca.org/js/jquery.js"></script>
<script defer="defer" src="http://neme-imca.org/js/responsiveslides.js"></script>
...
<script>
$(document).ready(function(){
...
</script>

Bloke · 2015-05-13 10:31:24

colak wrote #290715:

I added defer="defer" to all my javascripts after trying async="async" but jquery scripts just stop working.

If you defer jQuery itself then there’s a chance that the DOM will be loaded and “ready” before jQuery is available. Any jQuery code in your DOM-ready <script> tag that uses $(...) is then going to fail. Randomly of course, because it depends how long it takes for resources to come down the wire, but I’d wager most of the time it’ll fall over.

Look at the console output in Firebug / the inspector and you’ll probably spot a jQuery error lurking there.

When I was looking at this I even tried adding defer to the script tag that contained my DOM-ready code in the vain hope that it would be loaded in order after jQuery had been downloaded. Nope. It only appeared to apply to script tags with a src attribute.

As far as I’m aware there’s no decent workaround that I found. The ‘solution’ was to add defer to everything that wasn’t on the DOM-ready critical path. i.e. stuff that doesn’t explicitly require initialization until after full page load. That was effectively none of the scripts, so the upshot was that I removed defer and put up with PageSpeed complaining I hadn’t used it.

Other people may offer better insight, that was just a precis of my frustrating journey into trying to appease our Google overlord.

EDIT: Actually, a workaround is to combine all your javascript files into one massive minified(!) file, including your initialization <script> tag. But that has the knock-on effect that under HTTP2, minimsing all your stuff in that manner is regarded as not necessary and potentially worse than doing so.

colak · 2015-05-13 11:11:08

Hi stef, thanks so much for the detailed response. I am currently researching to find a way, possibly as offered here to have a script loading script which could be async itself but it can load the scripts in an order. Lazyload seems to be fitting the bill but it’s no longer supported.

Bloke · 2015-05-13 11:38:41

I think yepnope might also work, but I don’t know. Seems like loading more stuff on the page to get round a problem of loading stuff on the page!

jakob · 2015-05-13 11:59:43

I’ve been experimenting with script.js to load scripts asynchronously while making sure code isn’t executed before its respective dependency is ready. It works well for easy situations, but requires care when you have tiers of dependencies. It’s also very small (<2kb).

You use it like this:

<script src="/path/to/js/script.min.js"></script>
<script>

  // async load jQuery from Google CDN and define as 'jquery'
  $script('http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', 'jquery');

  // async load jquery slider script and define as 'slider'
  $script('/path/to/js/jquery.slider.min.js', 'slider');

  // when 'jQuery' and 'slider' are ready, execute code 
  $script.ready(['jquery', 'slider'], function() {

    // your code here
    $('my-slider').slider( function () { 
      … your code …
    });

  });

</script>

What’s nice about it is you can include a call to the same js file multiple times and it’s intelligent enough to load it only once. That makes it easy to include only the js-files you need for a respective section, because you can specify the dependencies in each case without worrying if they appear twice in the code.

You can also define a variable for your scripts directory: see the advanced example.

a workaround is to combine all your javascript files into one massive minified(!) file, including your initialization <script> tag

Won’t minifying and concatenating all js files undermine the beneficial effect of the browser using CDN-based jquery calls because they are no longer recognisable as distinct (or is that now old-school)? Also, you end up including more code than you need on each page, although I guess that depends on how much it is, e.g. time to download unused code vs. time to process multiple http requests.

colak · 2015-05-13 12:03:24

Bloke wrote #290722:

Seems like loading more stuff on the page to get round a problem of loading stuff on the page!

You are absolutely right. On one hand it might foll google, on the other, it will eventually make a fool out of me as I’ll just be adding kbs in the site for nothing.

Bloke · 2015-05-13 12:06:50

jakob wrote #290728:

I’ve been experimenting with script.js

I like the look of that, thanks for the tip.

philwareham · 2015-05-13 12:55:24

You can also use RequireJS which does the same as script.js (RequireJS we use for this Textpattern Forum and for other Textpattern sites… eventually).

This is an example RequireJS file which loads only the scripts needed depending on what is on the actual webpage. Asynchronously of course, and not before jQuery if indeed the certain script needs jQuery.

You then call that in your HTML page like so:

<script data-main="assets/js/main.js" src="assets/js/require.js"></script>

Gocom · 2015-05-14 03:20:56

philwareham wrote #290734:

This is an example RequireJS file

Why does the file has invalid DocBlocks above elements where that aren’t documentable like that? Both

/*!
 * Unstripable.
 */

and

/**
 * DockBlock
 */

Are special syntaxes used by documentation tools, IDEs and build tools, and shouldn’t be used when not necessary.

philwareham · 2015-05-14 07:56:33

Gocom wrote #290752:

Why does the file has invalid DocBlocks above elements where that aren’t documentable like that? Both

OK, should I just use standard \\ comments here then? There were only set in docblocks for readability really.

Gocom · 2015-05-14 15:00:58

philwareham wrote #290758:

OK, should I just use standard \\ comments here then? There were only set in docblocks for readability really.

Either // or /* */.

Textpattern CMS

Textpattern CMS support forum

#1 2015-05-13 10:03:04