inspiré de nextjs
Précharge les liens présents sur votre site, afin de changer de page instantanément.
Demo : https://cachednavigation.johanstick.fr/1.html
C'est simple, rajouter une ligne dans votre balise <head>
pour importer la librarie :
<script src="https://cdn.jsdelivr.net/gh/johan-perso/[email protected]/index.js"></script>
Et sur votre page, utiliser la balise <a>
:
<a href="/">Accueil</a>
pensez à importer la librairie dans votre balise <head>
// Précharger la page
prefetch('/faq')
// Naviguer vers la page
changePage('/faq')
Au chargement de la page, toutes les balises <a>
sont automatiquement analysés et préchargés. Cette analyse s'applique également en temps réel sur les nouvelles balises ajoutés dynamiquement.
Lors d'un changement de page, si celle-ci n'a pas pu être préchargé, le changement sera fait par le navigateur.
Le changement de page par le cache remplace le contenu du body par celui qui est dans le cache, ce qui fait que le reste de la page (<head>
, <html>
, ...) ne changeront pas.
MIT © Johan