title: Why Require.js load jQuery based script after all DOM is loaded?
body: <p>Recently I have included require.js to my project. I thought it will help me manage my scripts and speed up page loading, adding only this files which are necessary. But result was quite oposite.</p>
  
  <p>My question is, why after added AMD framework all scripts are loading at the end? (<a href="http://i.imgur.com/FpmXkra.jpg" rel="nofollow">see photo</a>) When I was including script via script tag js was loading properly, after DOM (without images etc.) was loaded. When I've added require.js, all scripts were loading after everything on page was loaded (with images), which results in pretty big delay.</p>
  
  <p>I'm concerned, what is the difference between require.js and normal scripts including and then concatenating them into one single file?</p>
  
  <p>My code below, for reference:</p>
  
  <p>require.js scripts structure:</p>
  
  <pre><code>|- main.r.js
  |- lib/
     |- config.js
     |- require.js
     |- sliders.js
  </code></pre>
  
  <p>main.r.js:</p>
  
  <pre><code>require(['./lib/config'], function() {
    require([
      'jquery',
      'modernizr',
      './lib/sliders'
      ], function($, modernizr, sliders) {
        sliders.init();
   });
  });
  </code></pre>
  
  <p>config.js:</p>
  
  <pre><code>require.config({
      baseUrl: 'scripts/',
    paths: {
      jquery: '../assets/jquery/jquery.min',
      modernizr: '../assets/modernizr/modernizr',
      bxslider: '../assets/bxslider-4/jquery.bxslider.min'
    },
    shim: {
      bxslider: {
        deps: ['jquery'],
        exports: 'jQuery.fn.bxSlider'
      }
    }
  });
  </code></pre>
  
  <p>sliders.js:</p>
  
  <pre><code>define(['jquery', 'bxslider'], function($) {
    var maxiSlider = function() {
      var $mSlider = $('.maxi-slider');
      // init slider
      var slider = $mSlider.bxSlider({
        // auto: true,
        pager: false,
        onSliderLoad: function(currentIndex) {
          $mSlider.find('li').eq(currentIndex).addClass('banner-animation');
        },
        onSlideAfter: function($slideElement, oldIndex, newIndex) {
          $('.banner-animation').removeClass('banner-animation');
          $mSlider.find('li').eq(newIndex + 1).addClass('banner-animation');
        }
      });
   }
   return {
     init: function() {
       maxiSlider();
     }
   }
  });
  </code></pre>