CODEWITHSUNDEEP
jquery
Shams Nahid
Shams Nahid

Reputation: 6559

why $(window).load() is not working in 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"?

Upvotes: 73

Views: 168596

Answers (5)

Mohsin Shoukat
Mohsin Shoukat

Reputation: 1250

in jquery-3.1.1

$("#id").load(function(){
//code goes here
});

will not work because load function is no more work

Upvotes: 0

Pritam Dobhada
Pritam Dobhada

Reputation: 1

I am using latest 3.6.1 jQuery and the document.ready and window.load were not executed in correct sequence; sometime document.ready used to execute after window.load. Using below script the sequence of execution is working fine for me.

//If you want the earliest event use native code (similar to document.ready function)
document.addEventListener("DOMContentLoaded", function () {
    console.log("01. DOMContentLoaded");    
})

//If you want to trigger event after window load (after all assets are loaded)
window.addEventListener('load', function () {
    console.log("02. Window onload event"); 
});

Upvotes: 0

William Hou
William Hou

Reputation: 1771

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.");
});

Upvotes: 13

Gene
Gene

Reputation: 11267

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

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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");
 });

Upvotes: 192

Related Questions