Как указать в Nuxt какие файлы нужно загружать 'заранее'?

Question

[VegasChickiChicki]

Можно как ли указать в Nuxt.js предварительную загрузку картинок? Суть в том, что при переходе с главной страницы мы попадаем на страницу где есть изображения, которые должны плавно появляться, но из-за того Nuxt их не загружает сразу же при заходе на сайт, они начинают подгружаться только при переходе на эту страницу. Вопрос: как указать какие файлы нужно загружать сразу при загрузке сайта?

Answer 1

[Владимир Коротенко]

https://w3c.github.io/preload/

Example directives to preload a resource that will be consumed by...

consumer	Preload directive
<audio>	<link rel=preload as=audio href=...>
<video>	<link rel=preload as=video href=...>
<track>	<link rel=preload as=track href=...>
<script>, Worker's importScripts	<link rel=preload as=script href=...>
<link rel=stylesheet>, CSS @import	<link rel=preload as=style href=...>
CSS @font-face	<link rel=preload as=font href=...>
<img>, <picture>, srcset, imageset	<link rel=preload as=image href=...>
SVG's <image>, CSS *-image	<link rel=preload as=image href=...>
XHR, fetch	<link rel=preload as=fetch crossorigin href=...>
Worker, SharedWorker	<link rel=preload as=worker href=...>
<embed>	<link rel=preload as=embed href=...>
<object>	<link rel=preload as=object href=...>
<iframe>, <frame>	<link rel=preload as=document href=...>

Comments

[VegasChickiChicki]

Действительно работает. Только есть пара минусов.
Если таких изображений будет много, например 5-10, уже проблемно их все указывать, так как приходится их вручную вписывать в nuxt.config.js, что бы он включал их в хеадер главной страницы. И не знаю как это автоматизировать, возможно написать свою директиву или что-то вроде того. Да еще и поддержка браузерами у такого метода, вроде бы как, хромает.

А так в целом вроде бы нормальное решение, спасибо!

[Владимир Коротенко]

Попробуйте вот по этой статье https://jmperezperez.com/svg-placeholders/