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

javascript, jquery, requirejs

Solution

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.

Problem

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?

Original source