Menu
I'm a bit confused as to when the window.onload event is fired. For example: i have a page that has lots of external js files and even an on-demand loading of the script (dynamically creating a tag). All of this code is in the page (ie. it does not get fired on click or smth, it should execute while loading). Now let's say that i have window.onload = somefunction() in the last on-demand javascript. Is it possible that window.onload will fire before all the scripts actually get loaded?
833
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
The window. onload property is created by the browser and exists by default. By default is has a value of null . But, if you assign a function to it (so it contains a valid function instead of null ), then the browser will call that function when the page resources have finished loading.
The general idea is that window. onload fires when the document's window is ready for presentation and document. onload fires when the DOM tree (built from the markup code within the document) is completed.
Your createCanvas function is declared inside the window. onload event handler, which means it's only declared locally and not visible to other code. Also, you can't return a value from an event handler. It isn't called by any part of your code that could capture the return value.
window.onload (a.k.a body.onload) gets fired after the main HTML, all CSS, all images and all other resources have been loaded and rendered. So if your images stall, that can take some time.
If you just need the HTML (DOM), you can use jQuery's $(document).ready() - it will fire when the HTML has been parsed but before the browser has finished loading all external resources (images and style sheets that come after your script element in the HTML).
Scripts embedded in the page get executed when the browser parses the </script> of each. So to execute a script before any other script, add a <script> tag in the header just after <head>.
This means you can "emulate" window.onload by adding a <script> tag as the last element of the <body>.
175
No. window.onload() is invoked when all resources (the document, objects, images, css, etc) have finished rendering.
Misread the question. Yes, it is entirely possible that the window.onload event will fire before a dynamically appended script has finished downloading. Scripts added using the DOM (document.createElement()) download asynchronously and aren't subject to the usual rule that window.onload() waits for all resources to finish downloading first.
I set up a test suite for you, http://jsfiddle.net/ywSMW/. This script adds the jQuery script to the DOM dynamically and writes the value of $ to the console during the onload handler. It then writes the value again a second later. Even with the script being cached, the first write to the console returns undefined, meaning the onload even has fired before the jQuery script has been downloaded and parsed.
Tested in IE and Chrome.
var windowHasLoaded = false; window.onload = function () { windowHasLoaded = true; } function doSomethingWhenWindowHasLoaded() { if (!windowHasLoaded) { // onload event hasn't fired yet, wait 100ms and check again window.setTimeout(doSomethingWhenWindowHasLoaded, 100); } else { // onload event has already fired, so we can continue } } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
