How to load javascript pages after asynchronously loading my manifest file

Question

I am trying to convert my application to asynchronous javascript loading:

<%= javascript_include_tag "application", async: true %> 

The problem is that all page-dependent scripts are run before the jquery loads asynchronously. How can I postpone them until the application.js manifest file is loaded.

I tried wrapping my js page in $(window).load(function(){}); , but it did not help. I still see the following error:

 Uncaught ReferenceError: $ is not defined 

Update

This seems to work for me, but I want someone to confirm that this is the right approach:

 <%= javascript_include_tag "application", async: true, onload: 'pageScripts()' %> 

Then the script page like:

 <script> function pageScripts() { // do something } </script> 

Answer 1

Your approach is correct, but I would suggest limiting your Async to production only, since Sprockets has not yet merged all the files in development.

 <%= javascript_include_tag "application", async: Rails.env.production?, onload: 'pageScripts()' %>