0

Update:

Please take a look at this.

I don't think it has anything to do with window.load stuff. It looks like a setInterval and alert issue. I want to find a best number with a fixed reason, not just some number by luck.

$('body').text('5');
alert('ok1');



$('body').text('6');
setTimeout(function(){
alert('ok2');

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

How do I make sure the HTML page is rendered before alert pops up?

AGamePlayer
  • 7,404
  • 19
  • 62
  • 119

1 Answers1

0

You need to put your code inside a relevant event listener, either DOMContentLoaded or load:

  • DOMContentLoaded – means that the browser fully loaded HTML, and the DOM tree is built, but external resources like pictures and stylesheets may be not yet loaded
  • load – not only HTML is loaded, but also all the external resources (images, styles, etc.)

For the load (more general) event, your listener would look like that:

window.addEventListener('load', function(event) {
  alert('ok1');
  // rest of your code
});
syntagma
  • 23,346
  • 16
  • 78
  • 134
  • https://jsfiddle.net/w85kphz6/ Would you please take a look at this? By setting `TIMEOUT_MS` to different numbers, like 0, 5, 10 or 20, the alert box would do less or none effect on blocking the HTML refreshing. I am wondering, how do I determine a perfect number to `TIMEOUT_MS`. I think it should be something fixed not by luck. – AGamePlayer Sep 07 '19 at 05:47
  • @AGamePlayer what do you mean by "blocking the HTML refreshing". This will run after all HTML on the site has been rendered. – syntagma Sep 07 '19 at 08:40
  • Would you please take a look at this jsfiddle, imo, when the alert pops out, the number on the button should always be 5. But in the real situation, it's not. – AGamePlayer Sep 08 '19 at 16:30