0

With JQuery <= 2.x, this code worked, displaying the text in the div after everything had loaded:

<!DOCTYPE html>
<html>
<head>
    <title>JQuery 3 Window onload test</title>
</head>
<body>
    <div id="my_div" style="visibility:hidden">Greetings!</div>
<script src="jquery.js"></script>
<script>
$(function () {
    $(window).on('load', function () {
        $('#my_div').css('visibility', 'visible');
    });
});
</script>
</body>
</html>

With the new JQuery 3.0.0, the div is not displayed. However, if I remove the window onload condition altogether, like this:

$(function () {
    $('#my_div').css('visibility', 'visible');
});

...then it works, or if I move the window onload outside the document ready like this:

$(function () {
  // other things I need to do once the document is ready
});

$(window).on('load', function () {
    $('#my_div').css('visibility', 'visible');
});

...then it also works. There is documentation that apparently is addressing what's happening in my example here, at the JQuery migration/upgrade info page.

Clarification from JQuery gurus would be appreciated, as I now need to revise many files to accommodate this behavior, and want to do it the correct way with the expected behavior occurring as in the past. Many thanks!

Tom
  • 1,836
  • 4
  • 16
  • 30
  • Maybe it's related to this change [Breaking change: document-ready handlers are now asynchronous](https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous) – Barmar Jun 24 '16 at 02:13
  • Oh, just saw that this is what you linked to. – Barmar Jun 24 '16 at 02:14
  • 1
    There is no need for it to be in the document ready block – epascarello Jun 24 '16 at 02:15
  • What is purpose of using both `$(window).on("load")` and `.ready()`? – guest271314 Jun 24 '16 at 03:05
  • 1
    @guest271314 I'm working with code by a different developer, and he put every onload window listener inside a document ready listener. Because it's worked up until now, I haven't really questioned it, but as pointed out by others, it doesn't really make sense. – Tom Jun 24 '16 at 14:14
  • @Tom You should be able to use `.ready()`, which is alias for `$(function(){})` without `$(window).on("load")`; alternatively, `$(window).on("load")` without `.ready()`. See also https://github.com/jquery/jquery/issues/3025 – guest271314 Jun 24 '16 at 14:22

3 Answers3

0

Try using:

$(document).ready(function(){
    $('#my_div').css('visibility', 'visible');
    });
Swapnil Sharma
  • 351
  • 2
  • 4
  • 13
0

You can safely manipulate the DOM in the document-ready callback:

$(function() { // or $(document).ready(), they are equivalent
    $('#my_div').css('visibility', 'visible');
});

In this example, I don't see any need for the window onload event. But if you want to wait for everything in the window to load, you can add the event listener from anywhere in the document without any need for document-ready:

$(window).on('load', function() {
    $('#my_div').css('visibility', 'visible');
});
chrisM
  • 338
  • 1
  • 4
  • 9
0

This looks to me like a race condition, in your code the document ready and window load function would be triggered at the same time. So by the time you attach a window load listener that event would have passed. Why it works in old jQuery? I don't know and don't really care because as pointed out by others you wouldn't code like that.

If you put an image in the document you would delay the load and you would catch it trigger.
https://jsfiddle.net/mowglisanu/13wfqdbL/

<img src="http://placehold.it/300x300">
Musa
  • 96,336
  • 17
  • 118
  • 137
  • I'm working with code written by a previous developer, and he did this virtually everywhere. Yes, it doesn't seem to make sense to put the window onload listener inside the document ready listener; I'm still curious (1) why this worked in previous versions of JQuery and (2) whether there'd ever be a need to do it this way...sounds like there isn't one anyone can think of. – Tom Jun 24 '16 at 14:11