Images Display Black Block While Loading

[jarrodmonterey]

Hello!

I'm trying to troubleshoot a loading issue on my pages.  While a header image is loading on my landing pages, I see this displayed:

Eventually, it resolves into what the image actually is.

The page in question is: https://familywineriesdirect.com/pages/atlas-peak-landing-page

But it's not just on this page that it happens.

How can I make it so that the black bar doesn't appear? I'd rather it just be transparent or the same color as the background of the page while it's loading (it only takes half a second after all)

 

@Dan-From-Ryviu - It looks like you assisted someone else on something similar and I tried to follow the instructions on that post, but it didn't seem to work on my page (I couldn't locate the base.css file where you suggested a code edit).

Thanks in advance.

[nvchien · Accepted solution]

Hi @jarrodmonterey 

You can try to find the class ".loading" in "theme.css" and update like below:

.loading {
    animation: placeholder-shimmer 1.3s linear .5s infinite;
    background-size: 300% 100%;
    background-image: linear-gradient(100deg,var(--colorLargeImageBg) 40%,var(--colorLargeImageBgLight) 63%,var(--colorLargeImageBg) 79%);
    background: transparent !important; // ADD THIS LINE
}

Hope this helps!

[nvchien · Accepted solution]

Hi @jarrodmonterey 

You can try to find the class ".loading" in "theme.css" and update like below:

.loading {
    animation: placeholder-shimmer 1.3s linear .5s infinite;
    background-size: 300% 100%;
    background-image: linear-gradient(100deg,var(--colorLargeImageBg) 40%,var(--colorLargeImageBgLight) 63%,var(--colorLargeImageBg) 79%);
    background: transparent !important; // ADD THIS LINE
}

Hope this helps!

[jarrodmonterey]

Thank you! Worked like a charm.

[jarrodmonterey]

Thanks so much again @nvchien . I was wondering if you might be able to help me take it a step further. On that same page, when the page loads, it seems the logo on the top is the very last thing to load. Ideally, it would be the first. Is there any way to make this happen?

[nvchien · Accepted solution]

No problem, @jarrodmonterey.

I'm assuming you're talking about this logo

It looks like it's belong to the slideshow section. If so, it would normally appear after the slide's javascript library is loaded.

You might consider using another section to display that image instead. I don't know which theme you are using, however most themes have a fullwidth banner (or hero banner) section, so you can use.

Then, the images will be displayed immediately without having to wait for the slideshow library to load

[jarrodmonterey]

Thanks so much. I'm still struggling to make this work. I'm using the expanse theme. The hero section in this theme is also an "optional slides" section, so when i used that, it loaded exactly the same. Any thoughts? I made a screen capture of the available sections in the theme, but apparently, I don't have permission to upload video.

[jarrodmonterey]

so here are two screenshots @nvchien