Loading in Javascript

Question

I have a Javascript function that looks like this ...

function loadInventory() {
  var json = [<?php echo $_SESSION['inventory']; ?>];

  for(var i = 0; i < json.length; i++) {
    var obj = json[i];
    for(var key in obj.rgDescriptions) {
      document.getElementById('userInventory').innerHTML += '<div class="col-sm-4"><div style="background-color: #2e2e2e;">'+obj.rgDescriptions[key].market_hash_name+'</div></div>';
      document.getElementById('loader').classList.remove('loader');
    }
  }
}

Obviously, it will take a couple of seconds for this function to be completed, which isn't a problem.

However, I want to load the page fully before running that function as the page has a loading animation which is removed in loadInventory() once the HTML has been added.

I've tried doing this ...

$(document).ready(function() {
  $(window).load(function() {
    loadInventory();
  });
});

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.

CONCLUSION:

I want to load the page fully. Once that is done, then I want to run loadInventory() which will add more HTML to the page.

Sorry for the mess, it's very difficult to explain really!

Wait... what is this line doing? var json = [<?php echo $_SESSION['inventory']; ?>]; — BoltKey
– BoltKey, Commented Jun 23, 2017 at 23:40
It just throws unexpected token error in my console. How does that even work? — BoltKey
– BoltKey, Commented Jun 23, 2017 at 23:45

Barmar · Accepted Answer · 2017-06-23 23:38:45Z

1

Use setTimeout() to defer running the function.

$(document).ready(function() {
    setTimeout(loadInventory, 1);
});

Since setTimeout runs the function asynchronously through the event loop, it won't be called until all the synchronous actions of loading the page are completed.

edited Jun 23, 2017 at 23:38

answered Jun 23, 2017 at 23:28

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ahlborg Over a year ago

That will just run the function once per millisecond, wouldn't it? Not really what I am trying to do.

Barmar Over a year ago

I meant setTimeout, I fixed it.

BoltKey Over a year ago

It is worth noting that the function will run as soon as the call stack is empty and at least one millisecond elapsed since the call of the setTimeout function. That's why setTimeout was used here (I suppose).

ahlborg Over a year ago

This seems to work decently. However, is it a safe way of doing it though?

Barmar Over a year ago

The browser won't be responsive while it's doing its thing. There's not really an easy way to solve that.

|

Dale · Accepted Answer · 2017-06-23 23:30:26Z

0

Have you just tried removing the $(window).load part? .load was deprecated in jQuery 1.8.

answered Jun 23, 2017 at 23:30

Dale

5444 silver badges13 bronze badges

2 Comments

ahlborg Over a year ago

That will run the function before the page has loaded fully, meaning that I can't see the loading animation.

Dale Over a year ago

Where are you placing the code? If you put it at the bottom of the page rather than the top, just before </body>, does it execute as you want it to?

Collectives™ on Stack Overflow

Loading in Javascript

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related