Attaching events to window.onload - javascript

I would like attach a function to window.onload so that it executes after everything is load. I have tried to do:
window.addEventListener('load', myFunction ,false);
window.onload = myFunction;
window.attachEvent('onload', myFunction); (this way does not work on Chrome)
What happens to me is that this function, looking at the Chrome's console (Network tab) is executed before window.onload (before the red line). I know this, because myFunction tries to load a remote javascript file and this file is loaded before red line.
I have also tried something more simple:
$(function() {
console.log("1111111");
});
window.onload=console.log("222222);
The output of that is:
22222222222
11111111111
Why ??? The first part should execute after DomContentLoaded and the second one after window.load isnt it? So why is this happening?

// This way does not work in Chrome
That's because you're using onload instead of load.

Related

How to call javascript function before the page is fully loaded

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

Chrome loads js events before DOM loads

I was doing some javascript testing on chrome v71.0.3578.98, with the window.onload and I'm experiencing the js happening before the DOM loads
Ref gif: https://imgur.com/nxHYjRr
here is the code just wrapped in a simple html tag.
<h1>Title...</h1>
<p>lorem500...</p>
<script>
function pageLoad() {
alert('I\'m alive');
}
window.onload = pageLoad;
</script>
So in this basic page I tried running it in chrome v71 and the javascript ran first, but in firefox, opera it loaded after page loaded, as expected. Any thoughts?
The problem is that alert blocks - while an alert popup is visible, further page rendering is prevented, and when window.onload runs, the page may well not have rendered at all yet, especially if there isn't much HTML at all before it. All elements do exist in the document when the onload runs, they just may not be visible. (It depends on the browser)
alert is very user-unfriendly, as well as being difficult to work with (as you're encountering). Use console.log or a proper modal instead:
<h1>Title...</h1>
<p>lorem500...</p>
<script>
function pageLoad() {
console.log('I\'m alive');
}
window.onload = pageLoad;
</script>
If you had to use alert, only alert after an instant setTimeout, thus giving the browser a chance to paint the page before the alert gets called, just in case the browser hasn't rendered the page yet:
<h1>Title...</h1>
<p>lorem500...</p>
<script>
function pageLoad() {
setTimeout(() => {
alert('I\'m alive');
});
}
window.onload = pageLoad;
</script>

Position of window.onload in Javascript

I have a javascript code like this
<script type="text/javascript">
window.onload=myFunction;
</script>
Is there any difference in using the above snippet in the <head></head> tag and just before
</body> tag, as I would like to call my function after the page loads.
basically there's no pratical difference, but I recommend
to place that code at the bottom, since you need to use a script (blocking-rendering tag) it's better put it at the end of the document.
to avoid a destructive assignments like that: writing window.onload=myFunction you destroy other previous assignments to window.onload event (if any) so it's better something like
(function() {
var previousOnLoadIfAny = window.onload;
window.onload = function() {
if (typeof previousOnLoadIfAny === 'function') {
previousOnLoadIfAny();
}
yourfunction();
}
}());
Binding to window.onload will always run your function when the load event fires. This only fires after everything in the page has finished loading, including images etc. If you want to run your function when the DOM has finished loading but before everything else then you can bind to the DOMContentLoaded event or use a library like jQuery (e.g. $(function(){ myFunction() });).
The benefit about putting your function at the end of your <body> is that theoretically this means that the rest of your content has already loaded and you don’t need to bind your function to a load event. This sometimes works, but depends on the situation.
No, where you place that will not matter - anywhere in the document and it will trigger when the document and all external resources (images, scripts etc) has loaded.
Because onload triggers after all external resources one often want to use DOMContentLoaded instead which triggers when the HTML DOM is ready. Which will make for a page that is more responsive.

What event name use in Opera's userJS to trigger a function when page finished loading and has downloaded all its assets like img,script,css etc.?

This is my code:
document.addEventListener('load', function () {
alert(document.getElementsByTagName("DIV").length);
}, false);
//'load' event above doesn't show any response, alert isn't showing
alert(document.getElementsByTagName("DIV").length);
// this alert returns 0 it looks like it is called before the page DOM has loaded
window.onload = function() {
alert(document.getElementsByTagName("DIV").length);
};
//returns 0, what the... it seems DOM hasn't loaded also
// but only on some sites, here on stackoverflow and youtube it works,
//but on google.com and many other websites (pcworld.com) shows 0
The same situation in latest stable and alpha Operas.
I suggest you simply do
window.addEventListener('load', function(){}, false)
like you would in a normal script. You could use opera.addEventListener('BeforeEvent.load', ...) but that might not fire if the page's scripts do not listen for load events in some Opera versions.
Some other background reading:
window.onload vs document.onload
addEventListener("input", callback) doesn't work in opera?

run javascript functions when the page loads

I have several JavaScript functions that need to run when the page loads to fetch content. I have tried to use window.onload to call the function but it hasn't worked.
Basically, need to run several functions after the page finishes loading but only once.
I have this so far but it didn't work
<script language="javascript">
window.onload=serverstats
window.onload=latestnews
</script>
Here is your main issue:
window.onload=serverstats #sets window.onload to serverstats
window.onload=latestnews #sets window.onload to latestnews and removes the reference to serverstats
You can fix this by doing:
oldOnload = window.onload;
window.onload=function() {
oldOnload();
serverstats();
latestnews();
};
However, as the question is tagged with JQuery, I would recommend using it and doing:
$(document).ready(function() {
serverstats();
latestnews();
});
You can also handle both by using the following code:
window.addEventListener("load", serverstats);
window.addEventListener("load", latestnews);
This doesn't work in IE8 and earlier though, which use:
window.attachEvent("onload", serverstats);
window.attachEvent("onload", latestnews);
You're overwriting the onload value. Write a function that calls both of them instead.
window.onload = function() {
serverstats();
latestnews();
};

Categories

Resources