Javascript: don't finish loading page until script runs

Question

I have a script that replaces the HTML of a webpage if a certain query string is present. The script needs to be loaded AFTER the HTML, but must be run and update the HTML BEFORE the page finishes loading, in order for my external script to detect the content of the page. Is there a way to achieve this?

I made this timeline diagram to show when the events should happen.

  +--------------------------------+
  | |                              |
E |=• Page begins loading          |
v | |                              |
e |=====• Script runs and          |
n | |     website content changes  |
t | |                              |
  |=========• Page is loaded       |
  | |                              |
  +--------------------------------+
    ^   ^   ^      Time
    1   2   3

connexo · Accepted Answer · 2018-09-30 22:26:24Z

5

Include your script using the attribute defer.

<script src="./path/to/my/script.js" defer></script>

Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

answered Sep 30, 2018 at 22:26

connexo

57.3k15 gold badges112 silver badges150 bronze badges

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

Collectives™ on Stack Overflow

Javascript: don't finish loading page until script runs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related