Estou construindo uma visualização baseada em SVG que (parcialmente) depende da exibição de muitas imagens em rápida sucessão. As imagens não podem ser buscadas com rapidez suficiente na rede, portanto devem ser pré-carregadas.

No meu entender, o SVG não faz o cache corretamenteimage tags, pelo menos nos principais navegadores. Então JavaScript pré-carregando librairies e técnicas (eg.esta questão tão) não vai funcionar. (Eu poderia recorrer ao uso de HTML em camadasimg tags, mas por causa das especificidades do meu aplicativo, eu gostaria de manter o SVG puro, tanto quanto possível)

Eu vejo duas opções:

Codificando os dados da imagem PNG como base64, armazenando-os na memória como cadeias de caracteres e usando as cadeias para preencher iterativamenteimage tags usandodata:image/png;base64.Layering muitos grupos SVG em cima uns dos outros com todos, mas um conjunto paradisplay: none ouvisibility: hidden e iterativamente mostrando o grupo apropriado. No entanto, acredito que não será possível detectar programaticamente que todas as imagens terminaram o pré-carregamento.

Qual é a melhor maneira de pré-carregar os dados da imagem? Talvez eu tenha perdido uma opção mais fácil.