Лучший способ предварительной загрузки тегов изображений SVG?

Question

Я строю визуализацию на основе SVG, которая (частично) полагается на отображение множества изображений в быстрой последовательности. Изображения не могут быть извлечены достаточно быстро из сети, поэтому они должны быть предварительно загружены.

Насколько я понимаю, SVG неправильно кэширует теги image, по крайней мере, в основных браузерах. Поэтому JavaScript-предварительная загрузка librairies и методов (например, this SO question) не будет работать. (Я мог бы прибегнуть к использованию однослойному HTML img тегов, но из-за специфики моего приложения, я хотел бы придерживаться чистого SVG как можно больше)

Я вижу два варианта:

• Кодировки по Данные изображения PNG в качестве base64, сохраняя его в памяти в виде строк и используя строки для итеративного заполнения image тегами с использованием data:image/png;base64.
• Наложение много групп SVG друг на друга со всеми, кроме одного, установленным в display: none или visibility: hidden и итеративно, показывая соответствующую группу. Тем не менее, я считаю, что невозможно будет автоматически определить, что все изображения завершили предварительную загрузку.

Каков наилучший способ предварительной загрузки данных изображения? Возможно, я пропустил более простой вариант.

Answer 1

Я не достаточно знаком с основной механикой веб-браузеры, чтобы знать, если это будет работать с SVG image тегов, но я имел успех кэширование изображений с новым Image():

//download low quality images 
    var imageArray = [] 
    for (var i = 0; i < 600; i++){ 
     imageArray[i] = new Image(); 
     imageArray[i].src = moviePath + (i + 1) + '.jpg.t'; 
     imageArray[i].onload = function(){ 
      var i = this.src.split(movieName + '/')[1].split(".")[0]; 
      d3.select("#bar" + i).style("stroke", 'rgb(' + colors[i].rgb + ')'); 
     } 
    } 

Чтобы показать image, я просто установил src отображаемого изображения на тот, который уже был загружен, и браузер загружает его из своего кеша.

Существует еще один небольшой трюк, использованный позже в source - сначала отобразите изображение низкого качества и начните загрузку высококачественного изображения только после того, как короткий таймаут пройдет без выбора другого изображения. Затем, после загрузки изображения с высоким качеством, покажите его только в том случае, если оно еще выбрано.

Не знаю, являются ли это лучшими практиками или чем-то еще, но it worked reasonably well.