BUG - Background images don't load

Bugs
1

I’m not 100% sure this is a bug, but it is a very unpleasant experience.

I’m building a little SaaS where ppl can create one-page property listings. The background of the site is the property’s main picture.

Sometimes this picture loads and sometimes nothing shows up. After manually refreshing the page it does show up, but of course, this is bad UX.

Does anyone know how this could be fixed? I already tried a workflow to refresh the page when you’re on it for the first time, but this is just a loop so the page keeps refreshing.

  • Any other workaround?

Also, according to fast.com, my Mbps is 38. So nothing wrong with the WiFi over here.

Thanks in advance! :slight_smile:

2

Anyone?

3

Not a known bug, Depends on your workflow. Looks like its tied to load sections (Since it comes after refresh) try to use states

4

States is not an option here I believe, as Real Estate agents will create their own websites for their clients. So it should have its own page.

5

Is there any other possible solution to this problem?

6

Put up a screenshot of your element which sets the background image. Are they large images?

7

@pork1977gm @melon The image is just a background image. So instead of background: Flat color #xxxxxx. It is now an image.

The average image looks like this one:

pexels-pixabay-279719
pexels-pixabay-2797191920×1200 247 KB

8

Here is how it usually looks:

Bubble1
Bubble11909×933 13.8 KB

Here is how it should look:

Bubble2
Bubble21911×931 302 KB

9

Again, when you refresh the page, everything is working perfectly fine. Only on the first load the image is not displayed.

10

Provide workflow details…(From uploading to display events)

11

@melon okay, I will add a detailed answer with lots of screenshots, thanks already for your help btw! :slight_smile:

12

@melon @pork1977gm Alright so here is how it goes.

When creating a new listing, the user is asked to upload the ‘MAIN PICTURE’:

Bubble 3
Bubble 31895×931 44.2 KB

That main picture, including all other details, is stored in the database and the user will then be redirected back to the dashboard. (After everything is filled out and button ‘submit’ is clicked:

Bubble4
Bubble41901×933 75.1 KB

On the dashboard the user can see its new listing and choose to view it:

Bubble6
Bubble61893×933 214 KB

Then they go to the page of that cell, which they just created, as you can see, the background is set to a dynamic image (Which is the MAIN image that they uploaded in the first screenshot):

Bubble7
Bubble71901×935 68.3 KB

And now the problem that I’m having is that 8/10 times that 'dynamic background image from the database’ does not show up on the FIRST load, everything else works perfectly fine. After refreshing the page, the image does show up.

Now I’m wondering why the image does not show up right away?

Thanks in advance!

13

Here is a great video that explains the problem perfectly:

In other, words this problem would be fixed if the page refreshed itself after the first load.

14

Just out of curiosity, does it work consistently if :processed with Imgix is removed?

-Steve

15

@shot Unfortunately this does not solve the problem. I just tried it and the same problem occurs. :confused:

16

In an effort to isolate the issue and find a workaround, I wonder if using a group element would work - i.e. using a large group, instead of the page element, for the background.

17

yes I tried something like that out with a floating group, but then it is not 100% responsive on all screens, and on some, bigger screens, when you scroll down, you will see a white block (which is the background’s color)

I just heard about a certain plugin that rescales your images to screensize. Going to try that out and hopefully that works. :slight_smile:

18

Try to dd the “'s Url” after the “image” when you display an image as a background.

19

What does this mean?

20

Thanks for your input, sadly it still happens.