Is there a way to run RequireJS modules before loading all the elements?

I am starting jQuery initialization from the RequireJS module.

However, I noticed that RequireJS waits until all page resources are loaded before my code runs.

I am uploading some large images to my page, but do not want to wait for them to load in order to configure my jQuery plugins.

Is there any 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'm new to RequireJS, am I doing this wrong?

+5
source share
1 answer

Ok, so I have a job that seems to work.

Link to this ticket here:

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

I moved the script tag with the main entry to the end of the body tag.

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

jquery:

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

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

, , , html , "" - DOM. . , , .

+2

All Articles