On the Home page, we have a special Lottie animation that serves as a preloader. This animation should only display under certain conditions:
- Accessing the home page by clicking on a link from an external page (not on your website)
- Refreshing the browser
- Entering the URL in the browser's address bar
However, we DO NOT want the animation to show when:
- Clicking on a link from an internal page (on your website)
- Navigating through the browser's previous/next history buttons.
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
<div id="preloader">
<div class="logo" id="home-preloader"></div>
</div>
<style>
/* Some styling here */
</style>
<script>
function playPreloader() {
var animation = bodymovin.loadAnimation({
container: document.getElementById('home-preloader'),
path: 'preloader.json',
renderer: 'svg',
loop: false,
autoplay: true,
name: "Home Preloader",
});
}
</script>
Looking for suggestions on how to achieve this? I've attempted using PerformanceNavigation.type and PerformanceNavigationTiming.type without success. While I'm not particularly proficient in JavaScript, I can work with some guidance.
Even if I could make it work, distinguishing between external and internal links still seems to be an issue.
window.addEventListener("load", function() {
var performance = window.performance || window.webkitPerformance || window.msPerformance || window.mozPerformance;
var navigation = performance.getEntriesByType("navigation")[0];
if (navigation.type === "navigate") {
console.log("The page was accessed by following a link, a bookmark, a form submission, or a script, or by typing the URL in the address bar.");
}
else if (navigation.type === "reload") {
console.log("The page was accessed by clicking the Reload button or via the Location.reload() method.");
playPreloader();
yesPreloader();
}
else if (navigation.type === "back_forward") {
console.log("The page was accessed by navigating into the history.");
noPreloader();
}
else {
console.log("Any other way.");
}
});