Question 187569 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – JS preloader leaking certain content before the page is loaded

Hello StackOverflow people,

I’ve been trying implement a JS preloader from a template, unfortunately, I can’t make it work so that it doesn’t leak some content before the page is loaded…

This is the JS function =>

    var clPreloader = function() {
        
        $("html").addClass('cl-preload');

        $WIN.on('load', function() {

            //force page scroll position to top at page refresh
            $("html").animate({ scrollTop: 0 }, 'normal');

            // will first fade out the loading animation 
            $("#loader").fadeOut("slow", function() {
                // will fade out the whole DIV that covers the website.
                $("#preloader").delay(300).fadeOut("slow");
            }); 
            
            // for hero content animations 
            $("html").removeClass('cl-preload');
            $("html").addClass('cl-loaded');
        });
    };

[...]

(function ssInit() {
        
        clPreloader();

    })();
 
[...]
        
})(jQuery);

(Note that the $WIN varriable is defined by above) =>

    $WIN = $(window);

    // Add the User Agent to the <html>
    // will be used for IE10 detection (Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0))
    var doc = document.documentElement;
    doc.setAttribute('data-useragent', navigator.userAgent);

Here’s the CSS that the JS script Add/Remove =>

html.cl-preload .home-content__main {
    opacity: 0;
    display: none !important;
}

html.cl-loaded .home-content__main {
    animation-duration: 2s;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

html.no-csstransitions .home-content__main {
    opacity: 1;
}

It seems pretty smart to me but no matter what I try, it’s leaking some text elements from .home-content__main class before the page is loaded. You can see it an action here =>

https://dev-preview.voresak.cc/
(Sorry about the missing SSL certificate…)

I should also add that the theme demo works perfectly fine in this respect...

What I have already tried

– messing around with hiding the elements in .home-content__main class with CSS (visibility: hidden !important; display: none !important; and alike)… no success.

– Swaping the $WIN.on(‘load’, function() with $(window).on(‘load’, function() & $(‘document’).ready(function() … no success.

– For a long while I thought the script is messed up by the Rocket Loader but even when I whitlisted this script with all the dependencies, it still behave the same…

Pretty much run out the ideas… What am I missing?

Thanks for any suggestions and opinions!

P.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to CBroe. Adding "cl-preload" class straight away to the HTML tag (and not waiting until the JQuery script adds it) did the trick. Simple solutions are the best, aren't they? :-) Thanks for the other suggestions too!


  2. 0

    To make sure that it is not the order of loading the scripts for the FOUC (https://en.wikipedia.org/wiki/Flash_of_unstyled_content), assign a style attribute to the element and remove it with javascript.

    window.onload = (event) => {

  setTimeout(function() { 
    $(".loading").remove()
    $(".hidden-while-loading").removeAttr("style")
  }, 2000)

}
    .loading {
  display: inline-block;
  width: 30px;
  height: 30px;
}
.loading:after {
  content: " ";
  display: block;
  width: 34px;
  height: 34px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #222;
  border-color: #222 transparent #222 transparent;
  animation: loadingAni 1.2s linear infinite;
}
@keyframes loadingAni {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="loading"></div>

<div class="hidden-while-loading" style="display:none">hidden-while-loading</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search