What is the difference between window.onload and document.onload in Javascript?

Javascript Web Development Front End Technology

document.onload

It gets fired prior to loading of images and other external content. document.onload event is fired before the window.onload.

window.onload

It gets fired when the complete page loads, which includes images, scripts, css, etc.

Example

Here’a an example to understand onload.

Live Demo

<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
            var imgObj = null;
         
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative';
               imgObj.style.left = '0px';
            }

            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
            }
            window.onload =init;
         //-->
      </script>
   </head>

   <body>
      <form>
         <img id="myImage" src="/images/html.gif" />
         <p>Click button below to move the image to right</p>
         <input type="button" value="Click Me" onclick="moveRight();" />
      </form>
   </body>
</html>

Samual Sam

Published on 23-Jan-2018 08:01:07

Previous Page Print Page