Single-page app image node caching issue

Hello,

A friend asked for help with a portfolio website, and I decided to use this as an excuse to try out Elm 0.19 and the browser package. I just deployed the website and it is accessible at https://emikoyasuda.xyz

Everything works great, however: there is a weird issue with images being cached by the browser. For example, from the main homepage, when you click on “Steap” (first tile) and then use the top-left navigation to rapidly switch to some of the other pages (e.g. to “Discover London” etc) back and forth, I can see that:

  1. The DOM gets updated
  2. Plaintext changes to new content as expected

However, images displayed actually remain the same as in the previous page, despite the DOM node pointing to a different image.

I tested this on Chrome 71 and Safari and the issue is the same.

Has anyone experienced this, any ideas how to fix it? Thanks!

Edit: I found that the images given to me were actually quite large (~8MB of images per page), I put them through a PNG optimiser which I think helped a bit.

That is the virtual DOM reusing nodes when te-rendering, so the same img tag is used changing the src and the old image is there until the new one arrives.

I’d recommend using HTML.Keyed on the top level pages or if you really think the reuse can help your performance then using Keyed on the img nodes using the src as the key will also help get rid of the old image and use a new one.

5 Likes

Thank you for your help, makes sense. I opted for using HTML.Keyed to create a div with the img inside, using the img src for the key as you suggested. That fixed it!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.