Why Use Window.onload

December 14, 2023 Post a Comment

I have tried finding an answer to this on my own, but only found instructions on how to use onload events. I seem to be missing the point. I've been taught that if I want something

Solution 1:

If you're directly running your code with dosomething();, you're delaying your browser's rendering for the time it takes your JavaScript code to run.

You can try to insert your code to the <head> of your html document:

<!DOCTYPE html><html><head><script>dosomething();

functiondosomething()
{
    window.alert('hello');
}
</script></head><body>
Does not render before the alert is dismissed!
</body></html>

You'll see that the page stays blank until you dismiss the alert. So every second the browser takes to run your JavaScript code is a second that your users have to wait for the site to be rendered.

Now if you change the code to be run on body's onload, the page gets rendered before the alert is shown:

<!doctype html><html><head><script>functiondosomething()
{
    window.alert('hello');
}
</script></head><bodyonload="dosomething()">
This page gets rendered before the alert!
</body></html>

Solution 2:

Consider these two blocks of code:

<head><script>alert(document.getElementById('foo').value);
     </script></head><body><inputid="foo"value="hello"></body>

<head><script>window.onload = function() {
              alert(document.getElementById('foo').value);
          }
     </script></head><body><inputid="foo"value="hello"></body>

In the first example, we'll get an error because the element you are referencing isn't found when the script runs - and so you are trying to get value of null.

In the second example, document.getElementById() will find the element with the id foo, because window.onload will get fired only when the complete DOM has been loaded and so the element is available.

Solution 3:

window.onload will fire once the DOM has finished loading. In your example, the DOM is not required. However, the following code will fail if the DOM has not yet loaded:

functiondoSomething() {
  alert(document.getElementById('test').innerText);
}

// Throws: TypeError: Cannot read property 'innerText' of null

Assuming your page contains an element with id test, it will alert its text.

Baca Juga

Solution 4:

waiting for the onload event assures you that all of your scripts and resources are loaded

Assume you are using jquery in your page and you invoked a function that uses it directly without onload , you can't guarantee that the jquery file has been loaded, which will lead to errors and possibly ruining your whole logic

Solution 5:

The onload event is handy to make sure the page is fully loaded before you run a script. For your example above it doesn't make sense, but if your page is still loading an item on the bottom and you try to call it then nothing will run.

I recommend using jQuery and using the ready function. This way you will ensure your page is completely loaded.

$( document ).ready(function() {
  // This will only run after the whole page is loaded.
});

If you don't want to load query, just put your javascript at the bottom of the page. It's best practice, and ensures the DOM is loaded in full.

For more info on the jquery ready function go here: https://api.jquery.com/ready/

javascript edu