How to call javascript function before the page is fully loaded

Question

I want to zoom out to 85 % before the page is fully loaded. Now the code has a problem that the zoom only works if the page is fully loaded. I try to put it to the head of html, but it doenst works. Can you help me?

Here is my code:

  window.onload = function zoom(){ document.body.style.zoom = "85%" }

Answer 1

Place this just after the opening body tag.

<script>
  document.body.style.zoom = "85%";
</script>

Without the code being wrapped in a function that is a callback to the window.onload event, it will execute as soon as it is encountered.

Answer 2

You can use DOMContentLoaded event. It is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

For example

document.addEventListener('DOMContentLoaded', () => {});

Answer 3

Thanks very much. It works but somehow I have to wait until the page is fully load, then I can see that it zoom out to 85 %. So the picture looks like it jumping.

document.addEventListener('DOMContentLoaded', () => {});