/post/6
Back
Preloader script fixes
Posted 2026-09-09 23:33:09
I've been experiementing further with the preloading system that I've setup for same-origin pages. I found after some testing that some browsers or devices did not work well with the old behavior.
The old system used for preloading would wait for a mouseover event on certain classed anchor elements (all classes of preload-a would preload). When this event occured, an asynchronous function would fetch the HTML content from the server of the page that the anchor was linking too. This HTML is then parsed into a DOMParser() which allows for parsing of HTML parallel to the actual page without needing to be nested or displayed within another/[the main] DOM. Then, when the anchor is clicked, the new pages HEAD content would be appened into the old head, then any items that are not actually suppost to be in the new head are removed. This is done because if the old and new pages share a common static file such as a stylesheet or script, even if the old head is replaced with the new head instantly, it still causes a visual reload of styles which is not desireable. This looping system fixes this by ensuring that all common dependancies stay the same without replacement.
This system worked great on my setup at home on Librewolf and Qutebrowser, but further cross-platform testing revealed that on Windows 11 chrome and any mobile device with a touchscreen, the mouseover event does not entirely work. This small inconsistency was enough to make me come back to this script in order to fix it globally.
The fix
I've fixed this issue rather basically buy just removing the mouseover event listener all togeather and just running the asynchronous fetching function immediatly instead of waiting for a hover.
Now all devices/browsers will have no issues with preloading pages. Of course this new code has been live for weeks, you can view it here (live) or here (git).
Known Issues
Because the page is not actually redirecting (even though it looks identical) the old page is not appended to the browsers page history meaning that if you click on a preloaded link and then try to use the back-button to go back to the prior page, it will not work.. If anyone has any ideas for a fix for this then Email me.
Another issue is its limitations. Preloaded tags for sites such as /#projects or /#contact do not work. Also static files such as the stylesheet or javascript source will not load well.