Я столкнулся с немного раздражающей проблемой, когда мои значки svg заметно загружаются после другого контента на более медленных устройствах (если они не кэшированы). Это вызывает "вспышку отсутствующих / не значков".
Значки .svg объединяются во внешний svg-спрайт и извлекаются, например, в виде ::1005*
<svg class="icon icon-microsoftexcel">
<use href="/icons/symbol-defs.svg#icon-example" xlink:href="/icons/symbol-defs.svg#icon-example"></use>
</svg>
Несмотря на то, что svg / use находится сразу после тега body, сам файл почти всегда загружается как один из последних файлов. Например, он загружается после загрузки всех изображений на определенной странице - и они вызываются значительно дальше по дереву DOM.
Итак, мой вопрос: почему файл не загружается, как только запрос найден в дереве DOM, и есть ли что-нибудь, что можно сделать, чтобы ускорить его?
Относительно скорости:
Я нашел несколько предложений, используя
.body::before{
content: url("/icons/symbol-defs.svg");
display:none;
}
Однако это приводит к тому, что браузер (chrome) загружает файл .svg 2 раза, а не один - и то же самое применяется при попытке «предварительно загрузить» его с помощью background-image.