Comment puis-je mettre en cache/précharger toutes les images d'une application Web Angular2?

Question

Je développe une webapp et c'est presque fini. Le problème est qu'il y a beaucoup d'images dans le dossier des assets et quand je navigue, l'écran clignote parfois en changeant les images de fond de webapp.

Est-il possible de précharger toutes les ressources ou de les mettre en cache dans le navigateur afin de rendre la navigation plus fluide? Aussi, puis-je avoir un retour sur le processus de préchargement pour montrer une animation de "chargement"?

Merci beaucoup!

Answer 1

Je ne l'ai pas fait avec des images, mais j'essaierais d'ajouter une protection Resolve à votre itinéraire domestique (par défaut). Voici un exemple où je précharge un grand fichier JSON 45 Mo en utilisant le résolveur https://github.com/Farata/angulartypescript/tree/master/chapter3/router-samples/src/app/resolver

Dans cette application, j'utilise la barre angulaire <md-progress-bar> pour afficher la progression.