Squarespace - Is there a way that I can change this pre-loading background color?

Question

I added a parallax javascript code to my code injection (footer) on my 7.1 SquareSpace site. However, now when you go to any page on the site that has the parallax effect, there is a background color that loads before the image loads. Has anyone experienced this before or have any advice on how to get rid of the color? I would like the actual image to be the first thing that loads, not the blue color. Or some sort of workaround so it isn't noticeable.

One of the web pages that has the color loading before the image

Javascript code I am using:

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > < /script> <
  script src = "https://cdn.jsdelivr.net/npm/scrollax@1.0.0/scrollax.min.js" > < /script> <
  script >
  $('.has-background').attr('data-scrollax-parent', 'true');
$('.section-background').attr('data-scrollax', 'properties: { translateY: "30%" }');
$.Scrollax(); <
/script>

<style>.has-background {
  overflow: hidden;
}

</style>

Any advice would be greatly appreciated!! Thanks!

Answer 1

Generally speaking, images always load after the rest of the page. However, you could set your section background colors to match the website background (white) so that it is less noticeable. If there's no option to set section background colors within your style and section settings, then the following CSS (inserted via the CSS Editor/Custom CSS) should do the trick:

:not(.has-background) .section-background {
  background-color: white;
}

.page-section.has-background.black-bold .section-background-overlay {
  background-color: white !important;
}