0

I would like to show a loading icon/ illustration on my website, until we have solved the huge load time problem on our website.

But the loader shows up too late. You can check this link: https://nettbutikk.ellco.no/produkt/o20/ and see that the loader first appears at the end of the loading.

This is the jQuery code:

jQuery(document).ready(function() {
    jQuery('#wptime-plugin-preloader').delay(2050).fadeOut("slow");
   });

How can I alter the code, so that the loader appears right at the beginning of the loading process? E.g. right after I click the reload button in the browser?

Removing the delay didn't help.

Thanks in advance!

TPA
  • 3
  • 4
  • Hi, I would add a class to the body element, for example call it "unready" and when the JavaScript done to load everything, I would remove this class by the simple removeClass function. In addition, if you would like to show the loader on 'refresh' trigger, you may need to use 'onbeforeunload' function, Google it, there you should add the 'unready' class to the body element . The 'onbeforeunload' should get call back function. Hope it helps. I'm sorry I can't add code lines, I answering via my smartphone. – Idoshin May 07 '18 at 06:57
  • SO has lots of questions like this... https://stackoverflow.com/questions/476679/preloading-images-with-jquery – Julo0sS May 07 '18 at 07:03
  • @Idoshhh, thanks but "onbeforeunload" opens a popup as I have read. This is not what I'm trying to achieve, unfortunately. – TPA May 07 '18 at 10:45
  • @Julo0sS the SO-post you have linked doesn't answer my question, because I'm not asking the images to load. – TPA May 07 '18 at 10:46

1 Answers1

0

Your code should be like this.

<script>
    jQuery('#wptime-plugin-preloader').delay(2050).fadeOut("slow");
<script>

<body>
    <div id="wptime-plugin-preloader"></div>

and remove this

<style type="text/css">
    #wptime-plugin-preloader{
        display:none !important;
    }
</style>
Vel
  • 9,027
  • 6
  • 34
  • 66
  • This didn't work for me, unfortunately. My loading page does not disappear after the delay. – TPA May 07 '18 at 10:47