Background image loading

Some of may pages have high quality images as backgrounds, I have noticed they can take a long time to load. Is there anyway to speed up loading, or at lead put a page loader animation until the background image loads?

There is a loader element. I have the element’s display set to “is fetching” = TRUE.

Screenshot 2023-09-13 at 8.28.16 AM
Screenshot 2023-09-13 at 8.29.03 AM

As I understand, isFetching is about loading data from backend (records). But once you have data loaded with url://…image.jpg isFetching=false, then it takes some time for browser to load and cache actual image.

I have same problem,and I use not backgroudn image but image, I added lazyload to my images but when user opens page there are no images i (just their containers) and then after 10 seconds they all appear on page.

2 Likes

Hi there,

you can only speed up loading if you reduce the size of your images.

But you can use a loader, as @chrisb suggested. Unfortunately, you cannot bind it to the image loading process, as there is no status available in WeWeb.

What you could do is to solve that with your layout. If you create a container for your loader and the image and put the loader behind the image, it will be visible until the image is fully loaded. Do you know what I mean? :sweat_smile:

2 Likes

Hi @Anna.fae still using the same implementation? Or did you find a more optimal solution in the meantime? @Adam what solution did you go with in the end?

@ben Unfortunaltely I have not found a different solution

1 Like

I have seen amazing approach when image is loaded lo-fi and blurred untill fully loaded.
This is explanation

I want to look into this js option:

Haven’t tried it yet, not high priority for me.