Why doesn't window onload bound in closure always run

Question

I have something along the lines of the following code where I bind a window onload inside a closure. The window onload only seems to fire randomly or when the page takes a long time to load

$(() => {
  console.log('test');
  // code that needs to run when document is ready

  window.onload = () => {
    console.log('test 1');
    // need this code to use some variables set in code above but only fire when all images have loaded so offsets are correct
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Why doesn't the onload fire every time the page loads?

Yes I know - I have code above the onload that needs to run on document ready — Pete, Jul 04 '19 at 09:32

score 2 · Accepted Answer · answered Jul 04 '19 at 09:34

2

The problem is that if you have a short DOM load the window.onload can be fired on the exact moment as document.ready. Thus, the onload listener will not be attached in time in the ready closure.

answered Jul 04 '19 at 09:34

Gecko

1,333
1
14
26

is there a way to tell if onload has already fired? so I can either bind an onload or run the function directly? – Pete Jul 04 '19 at 09:36
You can check by document.readyState == 'complete' – Gecko Jul 04 '19 at 09:38
1

Cool just found a duplicate based on this, thanks. Will accept when it lets me – Pete Jul 04 '19 at 09:38

Why doesn't window onload bound in closure always run

1 Answers1