Debugger says 'layout forced' problem in Firefox

Question

While debugging, I see the message:

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.

When I get this message, Firefox does not find my functions in

<script src='Game_Help.js' onload="alert('loaded')"></script>

If I remove <script>, the message goes away, but of course those functions are still not being found.

The strange thing is, I have a similar problem with Edge. Chrome works fine.

PS: I used the onload function to see if script was being loaded. I can make a workaround using an iframe, but that seems strange.

Answer 1

So what is happening is that the alert itself is interrupting the loading of content, causing the warning. So to fix it (and keep the script in the head section), remove the onLoad event from your script tag, and add an event listener containing the alert to your external javascript file:

document.addEventListener("DOMContentLoaded", function(){ alert('loaded') });

This listener will wait until other content is loaded before it will run.

The other way to fix this is to move the script tag to the body (HTML loads top to bottom, so you are just letting everything else load up more or less until it gets to the script). If your content is fairly complex or there are multiple scripts using the event listener will be a more robust and specific solution.