I couldn't locate the code you mentioned.
Instead, here's a different approach to handle page loading:
As the page loads, an image will appear in the center with the rest of the page being transparent. Once the page is fully loaded, hide the image by adding a 'hidden' class to the div.
Here are two classes you can create: one for hiding the div and the other for displaying the image.
.hidden{
display:none;
}
The second class will show the loading image.
.show_image{
position:fixed;top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;
z-index:100;
background-size: 5ex;
}
Then, in your HTML code:
<div class="show_image"></div>
<div class="hidden box"> Your main content </div>
Your main content will initially be hidden while the loading image is displayed.
Once the page finishes loading, toggle the 'hidden' class.
$('.box').removeClass("hidden");
$('.show_image').addClass("hidden");
You can utilize the load function to determine when the page has finished rendering.
$(window).load(function() {
//page fully rendered
});
Following this process will make your content visible and hide the loading image.
Please reach out if you require further assistance with page loading.