astroid-framework
astroid-framework copied to clipboard
templaza
White background always flashes
Hello, I have a little problem on a site that I am assembling. Whenever I go to or click on a menu item, the background flashes white. I have selected the box layout, set a background image and set a dark color as the body. Still, there is always a flash when I call up the page. In my video you can see this nicely:
https://watch.screencastify.com/v/8ojdiJqt5TB1zHKWk14o
Does anyone know why this is happening or how I can turn it off? In my other pages this effect is not so strong. Here is the link to the design:
https://p624550.mittwaldserver.info/cms/
As always I thank you in advance for your tips and help WBR, deltapapa
Hello @deltapapa01 I add the bug label, but I don’t think it is a bug but a lag depending on the css load priority and loading time.
I saw the exact same flash on my Astroid Testing Website —> http://joom4-astro.graf-test.ca/
I’m not sure how to fix this, I have to think about it.... If not possible at, leat adding an animation like fade will help????
Maybe @sonvnn can find a solution • Anyway, as a enhancement, I think that Astroid Template Manager should have a Template “body or page” setting with all choices of color, image, video background, animation to control the background of different Page Layout Styles to start.
Like that users will not have to add custom css and also, control of the background of pages are a basic important design choice.
I just test adding the custom style directly in the “Head” by using the Astroid “Custom Code” “ Before Head” by adding the background in a
Again, I think a fade animation will render the visual more “acceptable”
Note: the Servers I use are extremely fast — All top of the line SSD and servers
I’m testing the “Preload” command and it seem to load even faster
<link rel="preload" as="image" href="/images/Desert.jpg">
<style> .astroid-framework { background-image:url(/images/Desert.jpg);} </style>
Also a good image compressor will help. I personally use Squoosh (a Google developed online compressor —> https://squoosh.app/ Easy and incredible level of compression.
They even have an Apps that can be integrated to a web system/server (like Astroid) —> https://github.com/GoogleChromeLabs/squoosh
@Chacapamac @deltapapa01 Thanks for your support. I will finish my company project in this week and back to Astroid in the next week. I will try my best to find a solution for this and backend loading issue in the next version. They are make me headage very much.
Thanks & Best Regards, Sonny
@deltapapa01 , @sonvnn For the Flash problem. I think I find the solution. Look at my test website —> http://joom4-astro.graf-test.ca/ My background image is 5120 × 2880 and after Squoosh compression is only 309kb
• For sure, the first time a user access the website it need to load the page, here good compression and good server are the way to go. It is no way to bypass that and the preload in the Head I do here is, to my knowledge, the ultimate way • If you click reload, the background (now in the Browser Cache) load instantaneously.
One other thing I did I turn OFF the “Preload” , I never use the “Preload” as, I think, contribute to that white page flash experience
For @sonvnn It will also help if you can add a short fade-in animation to the background it will probably help visually for a smoother transition.
Hello, and thank you for the answers. I was also very busy and therefore could only answer today. My wallpaper is only 8kb, and yet the flashing is very strong. On the sample site I am transforming from JSN Epic to Astroid with Joomla 4, this flashing is not at all: https://taekwondo-husum.de/ I also tried to make the background color dark, I thought then the flashing is even less noticeable, but unfortunately it always remains white. I think that is also the trick in the JSN template, the background behind the image is a darker, and thus the flash is not further noticeable. Maybe Sonny still has a good idea.
Thank you very much, deltapapa
Translated with www.DeepL.com/Translator (free version)
@deltapapa01 — Can you look at my example —> http://joom4-astro.graf-test.ca/
I use your background mage and try to be as close as possible to your example website.
I try Firefox & Google — Tell me what you see?
Personally I see no difference between the loading of the background between your website and my test.
INFOS & NOTES: • I put the image background were it should be, directly in the Astroid Template Manager > Basic > Layout Settings
• The PRELOADER NEED to be put OFF — If not the flashing of the background is highly noticeable — @sonvnn —> maybe can find a way to start the Preloader AFTER the Body Background image or background color are loaded (same bad flash on simple color body background)
• I set the Astroid Template Manager > Colors > Body > Background Color to transparent
Hi @Chacapamac , thank you very much, this is exactly what triggers the flash:
• The PRELOADER NEED to be put OFF — If not the flashing of the background is highly noticeable — @sonvnn —> maybe can find a way to start the Preloader AFTER the Body Background image or background color are loaded (same bad flash on simple color body background)
I have the preloader turned on on all my pages, and strong flashing on all pages, regardless of whether an image or just a color is loaded as a background, e.g. here: https://petersen-webdesign.de/
I turn off the preloader on my pages for now, maybe Sonny will find a solution for the problem.
Thanks for your strong help, you are great :-)
@deltapapa01 , Happy to Help! Yes, if Astroid have a Preloader, it should work better. I’m sure @sonvnn can find something...
Good Day to All!
Hello, is there already news about the preloader? I actually like to use the preloader, but have now turned it off on all my pages to prevent the "flashing" of the page. Maybe @sonvnn has an idea what causes the flashing?
WBR, deltapapa