Custom Loader Ani not visible anymore...

11 replies · opened Aug 19, 2021

Aamadeus77Aug 19, 2021

Don't get it. Since a few days the custom loader animation is not visible anymore and I can't determine WHY...
And could it be, that besides the fade-in and fade-out page transition times you definetely "show" the loader a bit of a second?

Without seeing the loader for me it feels like a lag...

Thanks for supporting this in advance!

SSemicolon WebSTAFFAug 20, 2021

Hello,

We have just checked out your Website and the Loader appears to be working for us (check attached image). Can you please consider checking again and confirm? Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Aamadeus77Aug 23, 2021

No, I can't see it. Cleared all caches, used inkognito modes nothing! Newest Version of Chrome... Maybe it is a cached Version on your side? (Because you supported some issues)...

SSemicolon WebSTAFFAug 23, 2021

Hello,

We have the Latest Version of Chrome as well and we occasionally clear caches on Our Dev Machines to ensure that caches do not confuse us with irrelevant content or hinder with the process of code testing. Additionally, while checking your Website, we noticed Invalid HTML Codes: https://validator.w3.org/nu/?doc=https%3A%2F%2Fbsk.amadeus.media%2F . Consider fixing the issues and then check again if you are still facing the issue with the Preloaders.

Our Live Previews use the same codes: http://themes.semicolonweb.com/html/canvas/demo-medical.html and the Preloader appears to be working perfectly fine for us.

Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SSemicolon WebSTAFFAug 25, 2021

Hello,

Thanks for updating the codes. We have been checking the network model for a while now for your website and the issue appears to be with the JS Files loading slowly on your hosting servers which is causing this issue. We are attaching a Screenshot of what we see. Notice the time taken to load those assets.

Would it be possible for you to upload one non-customized file from the Package and see if you are facing the same issues with it? As sometimes external JS Files can cause other JS Files to queue and cause delayed loading. This is causing the Loader to display late (or not at all) as it runs on JS and until the JS loads, it will not display. Consider adding the async attribute to the JS File Linking except js/jquery.js and check how this works.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aamadeus77Aug 27, 2021

Hi, thank you for not letting me alone with this. I also have this same problem on several sites.

I tried to add the async attribute to every external js besides jquery.js but nothing was changing.

In the meanwhile the site changed to live state and there was a very interesting effect. After migrating the whole site to the new domain (no files where moving or changing at all - only the domain name), the loading animation was visible again for about 50 page loads or so but afterwards it disappeared again.

For me the site is LOADING relatively fast in general (severside is quite complex). But the time until the page fade in begins (after loading) takes too long, WHEN NO animation is showed. For me it seems, that you coded it so, that there is a MINIMUM of time to show the ani? Is it like this? What more can I do?

The new URL is: https://www.bsk-immobilien.de/

SSemicolon WebSTAFFAug 30, 2021

Hello,

Thanks for your Patience!

I also have this same problem on several sites.

Several sites that are using Canvas?

Can you please provide us with the Live URL of the Default (non-modified) Files from the Package so that we can check if this is an issue with Canvas or the Hosting Environment? As mentioned earlier, the Loader on our Live Previews works fine: http://themes.semicolonweb.com/html/canvas/demo-medical.html . The Loader Functions execute as soon as the Loading Plugin's JS Codes are available on the Page. There is no delay in execution. So please provide us with a Live URL of the non-modified files so that we can check this further.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Aamadeus77Sep 15, 2021

At least I decided not to use the loader any more. But now after I turned it off I recognized that the loading (visibility) of the "Select Boxes" right below the header image (bs-select plugin) lags ... do you know the reason for this? This occurs on the homepage and on every subpage of "KAUFEN"!?

Thanks for clarifying this.

SSemicolon WebSTAFFSep 15, 2021

Hello,

Any lag that occurs is a Network Issue with the Servers as all the Files are static and do not contain any render blocking codes. As soon as the network load the JS/CSS Assets on the Page, the JS Codes are executed. The bs-select Plugin is not even dependent with the Functions JS File, they run on their own, so this confirms that this definitely is a Network related issue. We recommend trying a CDN like Cloudflare and see if it makes a difference.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aamadeus77Oct 8, 2021

Hi, sorry I can't see a network issue. I think there is some JS blocking... See the "red bubble" at the top right on: https://www.bsk-immobilien.de/ (desktop). I use data-class-xxl="bg-none" data-class-xl="bg-none" data-class-lg="bg-none" data-class-md="bg-primary" data-class-sm="bg-primary" data-class-xs="bg-primary" here... and I think this is reacting very slow and maybe also blocking the bs-select plugin?

SSemicolon WebSTAFFOct 10, 2021

Hello,

We assure you that there is no JS Blocking on the Page. That is anyways not practical for the Template and would be detrimental for the user. But as we have mentioned earlier, JS Elements on the Page are functional only after the related JS Codes/Functions are available on the page and immediately executed. We have a few Demos that use the PreLoader. Example: http://themes.semicolonweb.com/html/canvas/demo-medical.html or http://themes.semicolonweb.com/html/canvas/demo-barber.html . And the Preloaders are available immediately. We request you to check the Files directly from the Package without your Custom JS Codes and check this for confirmation.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard