Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Disable the large black cross when loading page
- This topic has 7 replies, 2 voices, and was last updated 3 years, 7 months ago by
Ernest Marcinko.
-
AuthorPosts
-
October 11, 2022 at 10:04 am #39595
Fransa
ParticipantHi team!
I’m using your plugin for a long time and it’s working great.
But in the last monts, i see a problem. Everytime a page loads of the website, i see a large black cross for 2 miniseconds. Then it disapears.
When I check the header in elementor editor were I pasted the ajax search pro shortcode, i also see a very large cross and a selector. Can I somehow remove this cross and the selector named “generic fields”.
Please visit the website yourself and check added printscreen.
Kind regards,
Frank
October 11, 2022 at 11:31 am #39598Ernest Marcinko
KeymasterHi Frank,
This phenomenon is called FOUC, and is not caused by the search plugin. It happens, when the site stylesheet files are loaded asynchronously instead of during the regular page load – and the yet unstyled items flash until the CSS file is loaded.
Usually Cache plugins have this feature, but is disabled by default Try checking your cache plugin options for asynchronous CSS loader feature or something similar.Some CDN providers may also offer a Stylesheet Lazy Loader, Rocket Loader or similar features – which will result in this issue. These should be used very cautiously, and critical CSS must be validated and generated first, which is not an easy task.
October 11, 2022 at 2:37 pm #39601Fransa
ParticipantHi Ernest,
I’ve checked it and it seems the problems is indeeed coming from wp-rocket.
Nomally, I can exclude the css file of a plugin in wp-rocket. In this case, I can’t find the css file aff the ajax searh plugin. Can you inform what the normal link would so that i can exclude this css file?
Kind regards,
Frank
October 11, 2022 at 3:02 pm #39602Ernest Marcinko
KeymasterHi Frank,
Well, it is dynamically generated, so it may change depending on the features you enable in the plugin settings. In your case this is the current file:
https://www.abena.nl/wp-content/uploads/asp_upload/style.basic-ho-is-po-no-da-au-ga-se-is.cssYou could try this dynamic file name as well, wp-rocket should recognize it:
/wp-content/uploads/asp_upload/style.basic-(.*).cssOctober 13, 2022 at 10:18 am #39637Fransa
ParticipantHi Ernest,
I’ve disabled to cache the CSS file, result: same problem.
Okay i’ve treid to disable all of the plugins except elementor + ajax search pro. I also disabled all of the optimization tools that elementor offers and disabled the caching, css optimization in ajax searh pro etc.
Result: the same cross is visible in the front-end while loading + it’s very chaotic in the back-end of elementor because it sows a black cross + strange filter?.
Please see my edit view in elementor of the header.
This problem is started about 1 month ago. I think it’s a problem in the plugin OR elementor. Can you have a look at it? Please see printscreen of editing field in elementor (everything set to basis level + all of the plugins disabled)
October 13, 2022 at 10:30 am #39643Ernest Marcinko
KeymasterThe stylesheets are still moved to the website footer, to the very end for some reason. By default the plugin enqueues them to the header, so something must be moving them. Because these styles in the footer are rendered just before the page is finished loading, the browser needs a bit of time to process them, thus causing the flicker.
If you want, I can take a look at this directly. Can you please add temporary FTP and back-end access? Thank you!
October 13, 2022 at 1:53 pm #39646Fransa
ParticipantHi Ernest,
Thank you for the reply.
Unfortunately, i’m not allowed to give any credentials.
Can we fix this somehow with the input that you give me?
How can i push the system that the CSS rules for the search bar are in the header and loaded a.s.a.p. when the page loads?In another website made with both elementor and your plugin I experience the same issue. Isn’t this a problem that has to be fixed?
October 14, 2022 at 2:03 pm #39655Ernest Marcinko
KeymasterHi,
You can try maybe changing this option to “file”: https://i.imgur.com/z5FRtwJ.png
That forces the stylesheets to load in the header for sure. If no luck, then I honestly don’t know, in that case something has to move them from the header to the footer. I doubt it is Elementor, as far as I know they don’t do any maninpulation of the site header contents. -
AuthorPosts
- You must be logged in to reply to this topic.