Image load time - Using image states

Has anyone tried loading their images as a list in a state on page load to avoid delays?

I’ve found that images take a while to load the first time the are requested by the page. My app does everything on one page so I thought of loading the images to a state on page load so they are ready to go when the popup appears. I have 8 categories of images with 4 images in each category.

1 Like

Hi did this work for you? Looking to do the same.

Hi @sydney22, gotta admit, I tried and couldn’t get it to work. I think there might be a way but my popup was a re-usable element and I got stuck. Let me know how you go.

1 Like I got it to work. It’s a little hacky but here’s what I did:

  1. Create a 1 px by 1 px image at the bottom of the page. This is your reference image.
  2. Create a state on that image set to type image.
  3. Set the state of the image when the page loads (the value in my case was the option set’s value).
  4. For the image in the popup, the value should be the reference image’s (from point #1) state.

Pros: your images will load much more quickly. Cons: This will gobble up WUs in the new system. Hope that helps.

Awesome, thanks for sharing. That’s a smart way of doing it!

1 Like