Update $(window).on('load', function () for jQuery v3+ | Firefox Issue

Question

Wondering how this jQuery script could/should be updated to be compliant with jQuery v.3+? This script adds & removes a class from our main content wrapper, with which we use CSS opacity & transition to create elegant fade-out and fade-in on page loads and transitions.

Has worked for years, but WordPress updated jQuery from 1.12.x to 3.5.x and now it totally randomly doesn't remove class on load in Firefox (other browsers don't seem to struggle). I can't figure out a pattern to when it will happen, it's just random and on different pages. This leaves page content invisible (opacity: 0 = not ideal).

Error we get is: "jQuery(window).on('load'...) called after load event occurred"...

jQuery( document ).ready(function( $ ) {
// All of our other functions... 

 // Remove .fade-out class from content wrapper after page loads
 $(window).on('load', function () {
    $("#content-wrap").removeClass("fade-out");
});  

window.addEventListener("pageshow", function() {
    $("#content-wrap").removeClass("fade-out");
}, false);


// Add .fade-out class to content before page unloads
window.addEventListener("beforeunload", function () {
  $("#content-wrap").addClass("fade-out");
});

});

================

Here is my attempt at a fix based on the initial comments (hope this is right way to present this):

(function( $ ) {
// Remove .fade-out class from content wrap after page loads
 $(window).on("load", function () {
    $("#content-wrap").removeClass("fade-out");
});  

window.addEventListener("pageshow", function() {
    $("#content-wrap").removeClass("fade-out");
}, false);
}( jQuery ));

jQuery( document ).ready(function( $ ) {
// All of our other functions... 

// Add .fade-out class to content before page unloads
window.addEventListener("beforeunload", function () {
  $("#content-wrap").addClass("fade-out");
});

});

Additional Questions About Fix:

• Is this proper syntax (sorry, not a JS expert yet)?

• Would this solution present possibility of .fade-out being removed BEFORE page contents (e.g., images) complete loading? It is a bit less elegant to have the page fade in and then additional images come popping in.

• Is there any known reason why the original code works fine on jQuery 1.x but fails occasionally with jQuery 3.x? And only fails on Firefox??