title: Script loading order in JS/CSS (with gulp as build system)
body: <p>I have an HTML file, testLoader.html:</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
      .loader {
          position: fixed;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          z-index: 9999;
          background: url('optier-spinner.gif') 50% 50% no-repeat #ccc;
      }
      &lt;/style&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="http://underscorejs.org/underscore.js"&gt;&lt;/script&gt;
      &lt;script src="head.load.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>etc.</p>
  
  <p>My goal is to have a "loading" image (animated GIF) while JS scripts are loading.
  Problem is the image in the <code>url()</code> tag in the <code>&lt;style&gt;</code> section is fetched only after JS files are loaded, so not effect for the animation.</p>
  
  <p>Network diagram of loading:
  <a href="https://i.stack.imgur.com/sLzXz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sLzXz.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the scripts are loaded and only after them the GIF image.
  I tried using script loaders like <a href="http://headjs.com/" rel="nofollow noreferrer">head.js</a> and it works, but I use gulp and the JS files of the project are injected during the build process (and the files change from dev to production), so script loader is not an option as far as I know.</p>
  
  <p>How can I make the image to load and be presented while the other files are loaded?</p>