AN UPDATE ABOUT PRELOADERS IN WIX 2020

Ask the community
,
1

After a lots of research, I deduce that it is still not possible to introduce preloaders that is displayed on all pages of a site , and not only when the page is refresh ( as it’s said in this discussion:
Real Preloader On A Wix Website! )

I work on a music label website, ( La Room Records ) it’s a site loading a lot of data, which I created via the new Editor X Beta ( the loading time is I find well reduced, but it is not yet enough) . Anyway…

So I searched for several codes that can offer the function I am looking for ( have a preloader that appears when the site is refresh… ) but ESPECIALLY when a user are browsing between the pages of the site , the preloader is displayed while loading the page that the user is visiting.
( in the idea, basically replace pages transitions… )

So I have a code below, which in the process works , but it has several errors : ( u can test it on your own to see the problems )

  • Blured images when the page has finished loading
  • Appearance of a logo (.gif) at the top left when the page is refresh (whereas there should be only the middle one).
  • The centre gif disappears too quickly

So I think there are corruptions errors with the javaScript… but impossible to find the errors.

( see the code below )

<!doctype html>

<html class="no-js animated fadeIn" lang="EN">
<head>
</head>

<body>
<div class="loader hidden">
<img src="https://media.giphy.com/media/l1UijjCfr0GCbQD261/giphy.gif" alt="loading logo"></div>

    <header>

    </header>

    <main class="black-background">

    </main>



    <script src="js/vendor/modernizr-3.5.0.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>

    <script src="js/plugins.js"></script>

    <script src="js/main.js"></script>

    <script>

        document.documentElement.className = 

        document.documentElement.className.replace("no-js","js");

    </script>
    

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->

    <script>

        window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;

        ga('create','UA-XXXXX-Y','auto');ga('send','pageview')

    </script>

    
    
    <script src="https://www.google-analytics.com/analytics.js" async defer></script>

            <script type="text/javascript">

        window.addEventListener("load", function () {

            const loader = document.querySelector(".loader");

            console.log(loader);

            loader.className += " hidden"; // class "loader hidden"

        });

    </script>

</body>



<body>

</script>

<style>
.loader {

    position: fixed;

    z-index: 12000;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

background-color: var(--light-color);

display: flex;

justify-content: center;

align-items: center;

}



.loader > img {

    width: 80px;

}



.loader.hidden {

animation: fadeOut 1s;

animation-fill-mode: forwards;



}



@keyframes fadeOut {

 100% {

    opacity: 0;

    visibility: hidden;

 }

 }

I just hope that Wix team will make a feature that is working on that point, because for lots of wix users, build a preloader via Wix is a kind of mind blowing thing, regarding Wordpress.

Hope that the discuss will be helpfull for some users and also we will find the problems of the code !

Thanks!

*note : the music label website mentioned at the top works with another code that does not show the preloader between pages.