Page loading div loads endless sometimes

Question

My pre page load script sometimes bugs out and is “loading” endless.

No console logs. Page is loaded correctly under the cover div.

It's hard to explain any logic to moment it happens, looks like random thing.

custom.js:

$(function() {
    $(window).on("load", function(){
        $('#loader').css("display", "none", function() {
          $(this).remove();
        });
        $('html, body').css({
            'overflow': 'auto',
        })
    })
});

header.php:

<body <?php body_class('d-flex flex-column h-100 no-scroll');?>>

<div id="loader"><p>Loading</p></div>
    <?php wp_body_open(); ?>

    <header class="site-header”>

[...]

I'm using Wordpress.

Answer 1

You can remove the onLoad listener from your function. That might be a problem due to variaous reasons. Can you try:

$(window).on("load", function(){
    $('#loader').css("display", "none", function() {
      $(this).remove();
    });
    $('html, body').css({
        'overflow': 'auto',
    })
})

Answer 2

On load

$( window ).on("load", function() {
    ...trigger load
});

When document loaded

$( document ).ready(function() {
   ...remove loading
});

Page loading div loads endless sometimes

Question

2 answers

solution1
0 ACCPTED 2022-04-15 21:12:37

solution2
0 2022-04-15 23:40:19

Page loading div loads endless sometimes

Question

2 answers

solution1 0 ACCPTED 2022-04-15 21:12:37

solution2 0 2022-04-15 23:40:19

solution1
0 ACCPTED 2022-04-15 21:12:37

solution2
0 2022-04-15 23:40:19