Primefaces pages loading slowly after jQuery version increased

Question

My previous Primefaces version was 6.0. I upgraded it to Primefaces 10.0 (with help from the migrate section on their website.) There are no errors in Clean&Build and Debug. Although there was no problem with the upgrade, almost 50% of the time, web pages load slowly or do not load at all.

I discovered that this problem starts after Primefaces 6.2. In primefaces 6.2 jQuery version increased to version 3.2.1. The only change I made is that I updated js files in terms of on('load'), by removing the .load() function. There is a slowness problem, but there are no errors in the browser console.

Then, I installed jQuery 2.2.4 by using custom handler in Primefaces 10 and this fixed the problem. So, the problem starts after jquery goes above 3.0.x. But, I can't use 2.2.4 for two reasons. First, server-side deployment does not happen when I use custom handler for jQuery. Secondly, it provides an environment for security vulnerabilities.

What could be causing this problem above 3.0.x, and how can I solve it?

---

EDIT:

---

CONSOLE WARNING: jQuery(window).on('load'...) called after load event occurred

@Melloware

I had this code in resources/default/js/menu.js

jQuery(document).ready(function ($) {
    $(window).load(function () {
        setTimeout(function () {
            $(LOADER).fadeOut('slow', function () {
            });
        }, LOADER_DELAY);
});
});

I changed it to:

jQuery(document).ready(function ($) {
    $(window).on("load",function () {
        setTimeout(function () {
            $(LOADER).fadeOut('slow', function () {
            });
        }, LOADER_DELAY);
});
});

Now, with using jquery-migrate plugins I got the warning on("load") event starts after load event

I seperated code into:

jQuery(document).ready(function ($) {
    
});

$(window).on("load",function () {
        setTimeout(function () {
            $(LOADER).fadeOut('slow', function () {
            });
        }, LOADER_DELAY);
});

It loads the page now, but does it good approach?

EDIT2:

If I seperate code like that (seperating document ready and on load), the application does not deploy on server. I change the file located in webapp/resources/default/js/menu.js. When I turn back to old state, it deploys on the server. Deploy failure does not give any errors. Somehow, the change in this js file breaks server deploy. How can I solve this?

Answer 1

Okay, I solved both web pages do not load and the application cannot deploy on the server problem by changing this:

jQuery(document).ready(function ($) {
    $(window).on("load",function () {
        setTimeout(function () {
            $(LOADER).fadeOut('slow', function () {
            });
        }, LOADER_DELAY);
});
});

Into this:

(function($) {
    $(window).on("load", function () {
        setTimeout(function () {
            $(LOADER).fadeOut('slow', function () {
            });
        }, LOADER_DELAY);
    });
})(jQuery);

Also, removing jQuery(document).ready() completely, instead of leaving it there blank.