problem with preloader

Resolved andreaborin
(@andreaborin)

6 years, 9 months ago

Hi everyone,

I’m experiencing an issue with the preloader image that comes with the Astrid theme: after I added some jQuery code in the Hompage, the preloader doesn’t show up anymore and when you load the site there’s a bit of confusion. How can I manage the time of display of the preloader, in order to hide the Homepage for the right time? I think I have to modify a .js file, but don’t know where to find it!
Thanks in advance for your attention!

Ab

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Kharis Sulistiyono
(@kharisblank)

6 years, 9 months ago
Hello there,

I checked your site is properly displaying the preloader. To set a custom delay time before it disappears, try doing the below steps:

1. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
```
.preloader.preloader-hidden {
  display: block !important;
  opacity: 1 !important;
}
```
2. Install and activate the TC Custom JavaScript plugin
3. Go To Appearance > Custom JavaScript
4. Paste the following code into the provided box
```
(function($){

    var preloader = $('.preloader');
    setTimeout(function(){

    preloader.remove();

  }, 2000);

})(jQuery);
```
2000 equals to 2 seconds.

5. Update

Regards,
Kharis
Thread Starter andreaborin
(@andreaborin)

6 years, 9 months ago
Hi Kharis Sulistiyono and thank you so much for your answer.

The main issue I was experiencing was caused by the lazy load of my images by Autoptimize plugin. In fact I was using the same CSS code you posted and tryied to add the delay by CSS3 to avoid jQuery. Eliminating the lazy load fixed the issue, but now I have to improve my loading speed, because on mobile I only have 49% at google page speed insights.
By the way thank oyu so much for your solution, that would work perfectly!

Ab
- This reply was modified 6 years, 9 months ago by andreaborin.
Kharis Sulistiyono
(@kharisblank)

6 years, 9 months ago

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support

Optimizing Matters
(@optimizingmatters)

6 years, 9 months ago

@andreaborin maybe try adding Logo-AB-grey.png to the lazyload exclusion list?

hope this helps,
frank (ao dev)