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%" }

• Il Maro: Check this Call js function before page loads
• Arup Rakshit: @dota2pro $(document).ready( is triggered when the page is fully loaded, but the OP's requirement is a bit different. So, I don't think it is dup of the linked post you mentioned. Does it?

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.

• Scott Marcus: @AnatoliiParubets I'm sorry, I don't know what you mean by "it will doing your html dirty". There is nothing wrong with this HTML. This is how to make code execute as soon as it is encountered, when no event exists.
• MinusFour: This will not work in head. The body element hasn't been parsed at that point, so it's not part of the DOM.

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', () => {});

• Scott Marcus: It's unclear that DOMContentLoaded is what the OP wants. Depending on what/how many/how big the external resources are, there could be an insignificant time difference between this and load.

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', () => {});