specifying a window.onload interferes with jQuery.ready? - javascript

Before loading jquery.js, I have a simple:
window.onload = function (){ /*dosomething*/ }
Do you know if that can interfere with $.ready or jQuery in general?
Thanks

No problem with that at all. But be aware that the window.onload event will most likely fire after DOMContentReady (jQuery.ready()).
window.onload does fire after all images, iframes etc. were loaded.

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

Attaching events to window.onload

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.

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.

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();
};

attachEvent / addEventListener to Window onload / load - preferred way

I have a script that starts when the page loads and I had been using this code below to start it:
if (window.addEventListener) {
window.addEventListener('load', otherRelatedParts, false);
}
else if (window.attachEvent) {
window.attachEvent('onload', otherRelatedParts );
}
but today I tried with a self invoking function like this:
(function() {
otherRelatedParts();
}())
It seems to work, in all browsers and is less code. Is this the preferred way to add events to the window load?
Your self invoking function will execute earlier than window.onload. It will execute at the moment the browser reads it. In most cases it actually does not make any difference so you can use it this way. Window.load is normally raised when all objects (images, JavaScript files etc) have been downloaded. $(document).ready() triggers earlier than window.onload - when the DOM is ready for manipulation.
I guess the above if clause is written to cover some cross browser issues. You should factor these things out of your code.
As other people have done this before, you might as well use some library as jQuery. You should look for .ready() there.

Categories

Resources