I am trying to find a way to change my html page on button press seamlessly (imagine pageA.html ends with a fullscreen image -> pageB.html starts with the same fullscreen image).
I have tried manually modifying the DOM using AJAX, but the issue is the new body is loaded before the new head, so the new JS files are still undefined thus the page breaks:
function loadNextPage() {
$.ajax({
url: "next.html",
method: 'GET',
dataType: 'html',
success: function (data) {
let parser = new DOMParser();
let dom_document = parser.parseFromString(data, "text/html");
let head_element = dom_document.getElementsByTagName("head")[0];
$('head').html(head_element.innerHTML);
$('body').html(body_element.innerHTML);
}
});
}
I have also tried using Barba.js but (a) I could not get it working, and (b) as I understand it is best for actual page transition, something that I do not need. (I also tried infiniteajaxscroll but I could not preload the next page).
Note: ideally I want to preload and cache the next page until it is needed to switch.
Is there another library or way for me to do this?
