У меня есть файл svg sprites icons.svg, например:
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="twitter" viewBox="0 0 512 512">
<path d="..some path data here..."></path>
</symbol>
<symbol id="facebook" viewBox="0 0 512 512">
<path d="..some path data here..."></path>
</symbol>
</svg>
, на который я ссылаюсь из тела веб-страницы:
<svg>
<use xlink:href="/images/common/icons.svg#twitter"></use>
</svg>
Я хотел бы предварительно загрузить icons.svg визбегать мерцанияКак это сделать?
Я пытался добавить ссылку rel preload в head:
<head>
<link rel="preload" href="/images/common/icons.svg" as="image" type="image/svg+xml"/>
</head>
Но это не работает. Я вижу, что icons.svg загружается два раза в инструментах разработчика Chrome, и появляется следующее предупреждение:
Ресурс http://localhost:57143/images/common/icons.svg был предварительно загружен с использованием предварительной загрузки ссылки, но не использовался в течение нескольких секунд из окнасобытие загрузки. Пожалуйста, убедитесь, что оно имеет соответствующее значение as и преднамеренно предварительно загружено
.