How to hide script execution on page load?

Question

CMS

Hello! The essence of the question is this:
I integrated the site into the WordPress engine and made an automated menu on it.
I started changing styles in css, but there are too many of them for the menu and I even got tired of doing it.
With a simple script, I changed the classes to those that are in the menu before integration into WordPress. Everything works with a bang. BUT! The script is executed when the page is loaded, so until the page loads (1-2 seconds), you can see the menu without styles, and this is very ugly. As soon as the page is loaded, all styles are selected.
Is it possible to somehow hide this script execution from the user?
$(document).ready(function() {
$(".b-level-1 > li").addClass("item_1");
$(".sub-menu").addClass("sub-wrap b- level-2");
$(".sub-menu li").addClass("item_2");
$(".sub-menu").removeClass("sub-menu");
});
ipt>

Answer 1

Well, for example, hide the menu initially:

.menu {
   visibility: hidden; 
}

And when the site loads, then apply your classes and show the menu.

Answer 2

Everything is simple.
Set the fixed block to full screen. At the end of your script, delete or hide it. For a change, you can put some gif with a running line on the block.

Answer 3

The question is not clear!
Hide code? Not really, JS client-side language works in this browser case.
If you don't want to show the "collapsed" HOUSE, turn on the preloader.
$(window).on('load', '.preloader', function () {
$(this).fadeOut();
// or with a CSS class
$(this).addClass('preloader-hide');
})