Solved

Images Display Black Block While Loading

jarrodmonterey
Tourist
8 0 3

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:

Screenshot 2024-06-07 at 11.52.25 AM.png

Eventually, it resolves into what the image actually is.

Screenshot 2024-06-07 at 11.53.07 AM.png

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.

Accepted Solutions (2)

nvchien
Shopify Partner
33 11 6

This is an 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!

View solution in original post

nvchien
Shopify Partner
33 11 6

This is an accepted solution.

No problem, @jarrodmonterey.

 

I'm assuming you're talking about this logo

 

nvchien_0-1718037051255.png

 

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

 

 

View solution in original post

Replies 6 (6)

nvchien
Shopify Partner
33 11 6

This is an 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
Tourist
8 0 3

Thank you! Worked like a charm.

jarrodmonterey
Tourist
8 0 3

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
Shopify Partner
33 11 6

This is an accepted solution.

No problem, @jarrodmonterey.

 

I'm assuming you're talking about this logo

 

nvchien_0-1718037051255.png

 

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
Tourist
8 0 3

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
Tourist
8 0 3

so here are two screenshots @nvchien

 

Screenshot 2024-06-13 at 9.32.39 AM.png

Screenshot 2024-06-13 at 9.33.00 AM.png