Preloader Code on Every Page

Ask the community
,
1

Hi everyone,

I have created more than 100 websites for my clients and I am having trouble with the preloader code I added to the sites now.

The code I have used for 1 year was working properly on every page. About a few weeks ago I noticed that the preloader code doesn’t work on every page on my clients’ sites. But I haven’t seen a problem with my own sites. Today, when I look at my sites, the code does not work on every page too, it only works once when the site is opened.

It is very strange that the code worked properly a few days ago and now only works on the first page. You can view the code below:

<div id="preloader">

</div>

<script type="text/javascript">
  (
 function() {
 var preload = document.getElementById("preloader");
 var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
 var loading = 0;
 var id = setInterval(frame, 64);

 function frame() {
 if (loading == 30) {
          clearInterval(id);
         preload.style.display = "none";
        } else {
          loading = loading + 1;
 if (!isMobile) {
 if (loading == 10) {
              document.getElementById("preloader").classList.add('hidden');
              }
          } else if (isMobile)

          {
 if (loading == 14) {
              document.getElementById("preloader").classList.add('hidden');
                }
          }
        }
      }
    })();

</script>

<style>
  #preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow: visible;
    background: #FEFCFE url('GIF URL') no-repeat center center;
    display: block;
    opacity: 1;
    transition: 1s opacity ease-in;
  }

  #preloader.hidden {
    opacity: 0;
  }

</style>

A must-have feature for my customers and the sites I created is not working now, and it was a very good solution for long loading problems. Can you help me? I am looking forward to your help to talk to people who encounter the same problem or to solve this problem together.

2

I want to be sure that I understand. The following option is described in the documentation :

Reload on every page
Tracking code is loaded again after every page navigation. This option forces your code to reload every time the user navigates to a new page.

Is this the option that you are using?

1288×576 45.9 KB

If this is the case, let me know and I will report this to QA for evaluation.

3

@yisrael-wix

Hi,

First of all thank you for your interest and understanding.

Wix Corvid is currently rolling out a new performance update. I had no problem about loading the preloader on every new page for any website I created. I think these sites have received this update and there is a problem about Tracking & Tools section because on the New Improvement about Corvid Announcement topic, someone had the same problem as me and the Wix Team solved the problem.

I also wrote on the announcement topic about my problem. I have 2 websites of my own that are important for now. These preloaders need to be fixed because that’s our job.

Websites: www.konutdiyari. com / www.konutdiyariestates. com

Thanks in advance for your help.

4

@isabel-z Hey Caroline, I just took a look and it appears that this might be related to the new performance release. Related in two ways: the performance might be so fast that the the preloader does not appear, or that there’s an issue with executing the embedded scripts in tracking/analytics.

Give me minute. I want to change the configuration of your two sites and I’ll be right back.

5

OK - I changed the configuration of your sites. Please try again. You might first need to count to 100.

6

Where is this option in my site?

7

Created mine, feel free to use, may not be displayed over the widgets

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Preloader Styles */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div id="preloader">
        <div class="loader"></div>
    </div>

    <script>
        // Function to show the preloader
        function showPreloader() {
            document.getElementById("preloader").style.display = "flex";
        }

        // Function to hide the preloader
        function hidePreloader() {
            document.getElementById("preloader").style.display = "none";
        }

        // Show preloader when a new page starts loading
        window.addEventListener('beforeunload', showPreloader);

        // Hide preloader when the page is fully loaded
        window.addEventListener('load', hidePreloader);
    </script>
</body>
</html>
1 Like
8

Where to add this code? My developer tools option does not have the code option
Screenshot 2024-02-15 115142

9

Look at —> SETTINGS

11

Hi

It used to work for a long time and now this happen!
Any preloader code that I put in on a custom code - It just only load the preloader over and over without disappearing and stuck there without getting or loading to the webpage, is there a problem with wix or the code and how do I fix this?

Need some help. Thanks in advance! Cheers!

CODE:

#preloader { position: fixed; width: 100%; height: 100%; z-index: 999; overflow: visible; background: #F2F3F5 url('https://static.wixstatic.com/media/*YOUR_ANIM_GIF_URL_HERE*') no-repeat center center; // CHANGE HEX COLOR OR EVEN ADD BACKGROUND IMAGE display: block; opacity: 1; transition: 1s opacity ease-in; } #loopIcon{ width:100%; height:100%; background:url('https://static.wixstatic.com/media/6283c2_34dbc67b79ee4e949bfaf07d3f52b608~mv2.webp') no-repeat center center; // CHANGE LINK TO GIF FROM MEDIA LIBRARY } #preloader.hidden { opacity: 0; }
13

The preloader remains in a loop, never get disappear and never get to the website page, any suggestion on how to fix it?

14

Sorry for the delayed response, Looks like the code need an update, I will take a look on this and will try to find a solution. Thanks