jquery integration issue when attempted to execute on load

Question

It may just my limited js experience but until recently I had some js attached to the drupal context on one of my sites to produce some small animation/style effects that took the form:

$(window).on("load",function() {
    //do something
})

This worked great until recently then suddenly stopped working with no errors or messages. Eventually I got it working by changing the above to:

$(document).ready(function() {
    //do something
})

Did something change in core or jquery that caused this? Why would there be no errors? I use the first $(window).on() successfully on at least two other sites but have not been able to figure out why it stopped working on this one.

Some of the js I wish to run relies on the entire page being fully loaded so I really would rather use $(window).on()- which I believe triggers later.

I am using the latest release version of drupal 8

Answer 1

As @Kevin mentioned

Drupal 8.4 introduced jQuery 3.x

And according to jQuery Core 3.0 Upgrade Guide the "ready" event has been removed.

What you should do is to implement your functional code in Drupal.behaviours. This would have the similar effect as $(document).ready() but with more benefits.

(function ($, Drupal) {

  Drupal.behaviors.myHandler = {
    attach: function (context, settings) {
      // do something
    }
  };

})(jQuery, Drupal);

Answer 2

After reviewing @hugronaphor's answer. In particular this link along with some jQuery 3.x discussions regarding changes to the ready and load events my final solution was in fact to remove my code from Drupal.behaviours.

In the end I have implemented code in the following style:

(function ($, Drupal){
    $(window).on("load",function() {
        //Do something
    });
})(jQuery, Drupal);

This gave me reliable access to the .on("load") event again which is what I was after as I need the entire page to be loaded before I trigger the script.

As my script is relatively simple and doesn't need further context information I think this is fine for my use case.

I "think" the issue is related to the following change in jQuery 3.x where on("load") is not guaranteed to fire inside a $(Document).ready state any more - which is what Drupal.behaviours is giving you. I am something of a js noob though so will leave it to smarter people to explain why this may or may not be the case. If there is a better answer I would like to hear it.

For my simple case not being in the Drupal.behaviour has solved my issue.