Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

why $(window).load() is not working in jQuery?

Tags:

jquery

I'm learning jQuery using visual studio and testing my code in Chrome browser. This is my HTML code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="jquery-3.1.0.js"></script>

    <script type="text/javascript">
        $(window).load(function () {
            alert("Window Loaded");
        });
    </script>
</head>
<body>

</body>
</html>

This is my solution explorer

Solution Explorer

Now why my browser doesn't alert "window Loaded"?

like image 852
Shams Nahid Avatar asked Jul 29 '16 04:07

Shams Nahid


People also ask

What is window load in jQuery?

The code which gets included inside $( window ). on( "load", function() { ... }) runs only once the entire page is ready (not only DOM). Note: The load() method deprecated in jQuery version 1.8. It was completely removed in version 3.0.

What is $( document .ready () and $( window .load () in jQuery?

ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc. are loaded, but after the whole DOM itself is ready.

Is jQuery load deprecated?

Note: the jQuery . load() method was deprecated in jQuery 1.8 and removed completely in jQuery 3.0.

How use JavaScript window load?

JavaScript has a window onload event to launch certain functions whenever a web page is loaded. The onload event is also used for verification of type and version of visitor's browser. Further cookies can also be checked through the onload attribute. The attribute of onload triggers when the object is loaded in HTML.


3 Answers

You're using jQuery version 3.1.0 and the load event is deprecated for use since jQuery version 1.8. The load event is removed from jQuery 3.0. Instead you can use on method and bind the JavaScript load event:

 $(window).on('load', function () {
      alert("Window Loaded");
 });
like image 93
Bhojendra Rauniyar Avatar answered Oct 23 '22 10:10

Bhojendra Rauniyar


In short, the FIRST answer is the CORRECT one:

$(window).on('load', function () {
  alert("Window Loaded.");
});

I have to write a whole answer separately since it's hard to add a comment so long to the second answer.

I'm sorry to say this, but the second answer above doesn't work right.

The following three scenarios will show my point:

Scenario 1: Before the following way was deprecated,

  $(window).load(function () {
     alert("Window Loaded.");
  });

if we execute the following two queries:

<script>
   $(window).load(function () {
     alert("Window Loaded.");
   }); 
 
   $(document).ready(function() {
     alert("Dom Loaded.");
   });
</script>,

the alert (Dom Loaded.) from the second query will show first, and the one (Window Loaded.) from the first query will show later, which is the way it should be.

Scenario 2: But if we execute the following two queries like the second answer above suggests:

<script>
   $(window).ready(function () {
     alert("Window Loaded.");
   }); 
 
   $(document).ready(function() {
     alert("Dom Loaded.");
   });
</script>,

the alert (Window Loaded.) from the first query will show first, and the one (Dom Loaded.) from the second query will show later, which is NOT right.

Scenario 3: On the other hand, if we execute the following two queries, we'll get the correct result:

<script>
   $(window).on("load", function () {
     alert("Window Loaded.");
   }); 
 
   $(document).ready(function() {
     alert("Dom Loaded.");
   });
</script>,

that is to say, the alert (Dom Loaded.) from the second query will show first, and the one (Window Loaded.) from the first query will show later, which is the RIGHT result.

That's why the FIRST answer is the CORRECT one:

$(window).on('load', function () {
  alert("Window Loaded.");
});
like image 33
William Hou Avatar answered Oct 23 '22 08:10

William Hou


<script type="text/javascript">
   $(window).ready(function () {
      alert("Window Loaded");
   });
</script>
like image 23
Gene Avatar answered Oct 23 '22 08:10

Gene