Recommended way to cache <img> elements

[bennlich]

Hey there! I'm wondering if there are any recommended ways to cache elements. Some of my render loops happen in a requestAnimationFrame(), so I'd like to prevent tons of network requests for the same images.

➿ ➿ ➿

I tried declaring my icons once, outside of my render function. E.g.:

let someIcon = html`<img src="icon.png">`

let renderButton = () => {
  return html`
    <button>${ someIcon } Click me </button>
  `
}

let renderAll = () => {
  morph(oldButton, renderButton())
}

This prevents additional network requests, but it still causes unnecessary changes to the DOM because the cached img node can only live in one tree at a time. So when morph does a comparison, the img exists in one tree and not the other, and it does a replacement.

Now that I'm writing this, maybe what I need is exactly two copies of each image. One for the real DOM, and one for the comparison DOM?

Would love to hear if/how other people have handled this sort of thing!