-2

I had been researching on the above 3 JS/jQuery commands and I want to execute the JavaScript after EVERYTHING is loaded, but seems all the above 3 scripts are fired before the DIV is loaded. Can anyone tell me how to execute a JS script after EVERYTHING is loaded. Please see the following html : If you carefully notice this, you will see the alert pop up window before the DIV is loaded. I am running it in Chrome. 

      <script>

    window.addEventListener( 'load', function( event ) {
            alert("test");
    }); 


    $(document).ready(function(){
            alert("test"); 
    });


    window.onload = function(e){ 
            alert("test"); 
    }

      </script> 

   <body>
    <div>
        Hello There!!!
    </div>

   </body>
Isaac
  • 406
  • 2
  • 8
  • 16
  • 5
    "loaded" is not the same thing as "rendered". – Barmar Apr 04 '19 at 21:04
  • 3
    Change the alert to `alert($("div").text());` and you'll see the contents, which means the DIV is loaded. – Barmar Apr 04 '19 at 21:06
  • 1
    Also, instead of getting a small glimpse at what's loaded before the alert, I would use `debugger` or put a breakpoint in your script when debugging. I.e. `window.addEventListener( 'load', function( event ) { debugger; alert("test"); }); ` And have dev tools open whilst doing this. – Murchiad Apr 04 '19 at 21:09
  • 1
    Using `alert`s are blocking and meaningless for debugging purposes – charlietfl Apr 04 '19 at 21:10
  • @MoneyMurch That's not a good way to tell, because the DOM can continue loading when the debugger is entered. – Barmar Apr 04 '19 at 21:24

1 Answers1

1

I think window.onload is what you're looking for. Here's the jQuery way:

$(window).load(function() {
  //dom not only ready, but everything is loaded
});