CODEWITHSUNDEEP
javascriptdombrowser
JSmurf
JSmurf

Reputation: 135

document.onload() strange behaviour, few questions?

Before you start reading, don't vote me down, its not just another question about window.onload vs document.onload.

window.onload should trigger once all DOM nodes are fully loaded. document.onload should trigger once all DOM nodes are ready, it won't wait for all the assets to fully load.

Now if we have something like this with window.onload:

<!DOCTYPE html>
<html>
    <head>
        <title>Testing out document.onload and window.onload</title>
        <script>
            window.onload = function() {
                alert('Loaded!');
            };
        </script>
    </head>
    <body>
        <img src="https://goo.gl/0Oomrw" alt="Heavy image!" />
    </body>
</html>

The script will wait until image is fully loaded and then trigger alert.

And if we have something like this with document.onload: 

<!DOCTYPE html>
<html>
    <head>
        <title>Testing out document.onload and window.onload</title>
        <script>
            document.onload = function() {
                alert('Loaded!');
            };
        </script>
    </head>
    <body>
        <img src="https://goo.gl/0Oomrw" alt="Heavy image!" />
    </body>
</html>

Nothing will happen and script won't load at all, unless we make our function self executing like this: 

<!DOCTYPE html>
<html>
    <head>
        <title>Testing out document.onload and window.onload</title>
        <script>
            document.onload = function() {
                alert('Loaded!');
            }();
        </script>
    </head>
    <body>
        <img src="https://goo.gl/0Oomrw" alt="Heavy image!" />
    </body>
</html>

And now the script will work but won't wait for image to fully load like it does with window.onload.

Now I have 2 questions really:

  1. Why do we need to create self executing functions with document.onload, and window.onload works without making our function self executing? It works the same in latest versions of Chrome and Firefox so I guess its how it its suppose to work, but why?

  2. What is really happening there with that code once we assign document.onload a function? I understand that its a way to wait for DOM to load. But we are saying that window.onload = function() { } Should this make a window a function? Or is that window has eventListener attach to it, that is triggered by onload trigger? Looks like answered this question myself... :) Is it true?

Thanks!

Upvotes: 0

Views: 67

Answers (1)

Quentin
Quentin

Reputation: 944474

document.onload should trigger once all DOM nodes are ready, it won't wait for all the assets to fully load.

You are operating under a misapprehension. That is not the case.

Why do we need to create self executing functions with document.onload

Because there is no such thing as document.onload. It is an arbitrary property name with no special meaning.

If you assign a function to it, nothing will happen other than that its value will be the function.

If you immediately invoke the function and assign the return value, then the function will be invoked (immediately, before the DOM is ready) and nothing special will happen to the value you store on the property.

If you want to run a function when the DOM is ready then use the DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
});

Upvotes: 1

Related Questions