Is there a way to run RequireJS Modules before all elements are loaded?

Question

I am run jQuery initializations from a RequireJS module.

I have noticed however that RequireJS waits until all page assets are loaded before executing my code.

I am loading some large images into my page, but do not want to wait until they are loaded to setup my jQuery plugins.

Is there a best practice when trying to do this?

Here is my setup:

index.html

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

main.js

require(["inits"], function(Inits) {
  //Nothing here yet.
});

inits.js

define([
      'jquery', 
      'jquery.plugin1', 
      'jquery.plugin2',
      'etc'
], function ($) {
   //jQuery Document Ready.
   $(function(){
       //Jquery Init Code here
   });
}

I am new to RequireJS, am I doing this wrong?

Answer 1

Alright, so I have a work around that appears to be working.

Referencing this ticket here:

https://github.com/jrburke/requirejs/issues/463

I moved my script tag with data-main to the end of my body tag.

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

And then unwrapped my jquery functions:

Before

define([
  'jquery', 
  'jquery.plugin1', 
  'jquery.plugin2',
  'etc'
], function ($) {
   //jQuery Document Ready.
   $(function(){
       //Jquery Init Code here
   });
}

After

define([
  'jquery', 
  'jquery.plugin1', 
  'jquery.plugin2',
  'etc'
], function ($) {
   //Jquery Init Code here with no Ready Wrapper.
}

It seems to be working, and being at the end of the html file "should" prevent there being any problems with the DOM. I am however not entirely comfortable with this approach. I would like to keep this open to see if others have a better idea.