title: Loading in Javascript
body: <p>I have a Javascript function that looks like this ...</p>
  
  <pre><code>function loadInventory() {
    var json = [&lt;?php echo $_SESSION['inventory']; ?&gt;];
  
    for(var i = 0; i &lt; json.length; i++) {
      var obj = json[i];
      for(var key in obj.rgDescriptions) {
        document.getElementById('userInventory').innerHTML += '&lt;div class="col-sm-4"&gt;&lt;div style="background-color: #2e2e2e;"&gt;'+obj.rgDescriptions[key].market_hash_name+'&lt;/div&gt;&lt;/div&gt;';
        document.getElementById('loader').classList.remove('loader');
      }
    }
  }
  </code></pre>
  
  <p>Obviously, it will take a couple of seconds for this function to be completed, which isn't a problem.</p>
  
  <p>However, I want to load the page fully before running that function as the page has a loading animation which is removed in <code>loadInventory()</code> once the HTML has been added.</p>
  
  <p>I've tried doing this ...</p>
  
  <pre><code>$(document).ready(function() {
    $(window).load(function() {
      loadInventory();
    });
  });
  </code></pre>
  
  <p>But it doesn't seem to work very well. The function runs before the page is loaded fully so you can't see the loading animation.</p>
  
  <p><strong>CONCLUSION:</strong></p>
  
  <p>I want to load the page fully. Once that is done, then I want to run <code>loadInventory()</code> which will add more HTML to the page.</p>
  
  <p>Sorry for the mess, it's very difficult to explain really!</p>