Preventing White Flashing from Page Jumps

Site URL: https://www.securview.com

If you browse different pages on my site, the hero images generally take a little bit of time to load.  I see white text, and off white background for a split second.

Although I'm technically using a black bold theme, which uses black background color, that doesn't load.  If my top section uses a background image as a background, Squarespace ignores the theme color (showing off or regular white), and just waits a tiny bit of time, and loads the image.  The style of my site is very contrasty, which makes it more noticable for certain people.

I thought, are my images too big? I experimented. Compressed images even more. Didn't make a difference on a few pages. So I don't think image size loading is causing the site to load longer. 

Some have speculated this could have to do with the way certain browsers load AJAX/javascript from Squarespace.  That's probably true. Do I have any control over that? The flash is VERY quick on Mozilla, almost not noticable, but more so on Chrome and Edge. 

I know if i remove the background image, letting that section just show black, then the section loads immediatly with black and no flash, and there is no problem.  But I'd really like to have a background image, because that's the style i want.

 Anyway to make that happen without the flash?

Why is Squarespace choosing to ignore loading the default theme background color I set it to if I have a background image?  That must be how the backend is designed or coded.  It's like squarespace is saying "Oh hey, since we know you like to use your image background, we can turn off the theme black background." And I would say "But wait, can you leave it on until my image loads, the images take a bit longer to catch up, otherwise it's more obvious?" It's kind of like someone is still putting their shirt on if you decide to use background images as clothing, with no undershirt. I'm asking, why not already have me wearing a black undershirt while i'm putting on the image shirt?

Is there anyway to make sure that if a section has a theme black bold or whatever background, and I set it with a background image, to make it load like this:

Click On page 

Theme Background Black with text, then image background ( i mean this is technically what theme is supposed to do and set to this anyway right?)

instead of what actually is happening

Theme Background Black NOT there but with text, then image back ground 

I am having this exact same issue. Thank you for asking @sansari.

Would love to know the solution to this if anyone has one. Thanks!

@sansari I found this article and it helped me a lot (even though it's for 7.0 and I'm using 7.1) https://beatrizcaraballo.com/blog/loading-background. I was using all black backgrounds and even though i wasn't using any of the light ones at all it was still flashing white when changing pages.

I changed the Main color and Overlay color on all the light background options to black and it fixed my problem. I'm not sure if that will work for all issues but perhaps it will help with yours too. 

I have the same problem! Can't figure it out, did you solve it?

I have the same issue, contacted support and they advised me to use a workaround of using the same background colour as the default background colour on all of my "other" pages.

I have a blue background as default, when moving to other pages that have sections colored in white or dark brown, the blue background seems to load in beforehand.

It creates this odd quick flashing when clicking other pages.

I'll try Chele's fix and see if it works for me.

I have the same white flashing issue on page change. my background is set to one color everywhere. still every time i navigate to a different page - prolonged white flash.

Additionally when images start to load they first fill their space with white. Id rather have it transparent or same as background color.

Can someone please help? I'd love some css or java if necessary.