DEV Community

Bayu Angora
Bayu Angora

Posted on

2

How To Change Preload From Default Hover To Page Display Instantly?

Dear All

I use instant page script for https://angora.me with default code like this ->

let urlToPreload;
let mouseoverTimer;
let lastTouchTimestamp;
const prefetcher=document.createElement("link");
const isSupported=prefetcher.relList&&prefetcher.relList.supports&&prefetcher.relList.supports("prefetch");
const isDataSaverEnabled=navigator.connection&&navigator.connection.saveData;
const allowQueryString="instantAllowQueryString" in document.body.dataset;
const allowExternalLinks="instantAllowExternalLinks" in document.body.dataset;
const useWhitelist="instantWhitelist" in document.body.dataset;
let delayOnHover=60;
let useMousedown=!1;
let useMousedownOnly=!1;
if("instantIntensity" in document.body.dataset){if(document.body.dataset.instantIntensity.substr(0,"mousedown".length)==="mousedown"){useMousedown=!0;
if(document.body.dataset.instantIntensity==="mousedown-only"){useMousedownOnly=!0;}}
else{const milliseconds=parseInt(document.body.dataset.instantIntensity);
if(milliseconds!==isNaN){delayOnHover=milliseconds;}}}
if(isSupported&&!isDataSaverEnabled){prefetcher.rel="prefetch";
document.head.appendChild(prefetcher);
const eventListenersOptions={capture:!0,passive:!0,};
if(!useMousedownOnly){document.addEventListener("touchstart",touchstartListener,eventListenersOptions);}
if(!useMousedown){document.addEventListener("mouseover",mouseoverListener,eventListenersOptions);}
else{document.addEventListener("mousedown",mousedownListener,eventListenersOptions);}}
function touchstartListener(event){lastTouchTimestamp=performance.now();
const linkElement=event.target.closest("a");
if(!isPreloadable(linkElement)){return;}
linkElement.addEventListener("touchcancel",touchendAndTouchcancelListener,{passive:!0});
linkElement.addEventListener("touchend",touchendAndTouchcancelListener,{passive:!0});
urlToPreload=linkElement.href;
preload(linkElement.href);}
function touchendAndTouchcancelListener(){urlToPreload=undefined;
stopPreloading();}
function mouseoverListener(event){if(performance.now()-lastTouchTimestamp<1100){return;}
const linkElement=event.target.closest("a");
if(!isPreloadable(linkElement)){return;}
linkElement.addEventListener("mouseout",mouseoutListener,{passive:!0});
urlToPreload=linkElement.href;
mouseoverTimer=setTimeout(() => {preload(linkElement.href);
mouseoverTimer=undefined;},delayOnHover);}
function mousedownListener(event){const linkElement=event.target.closest("a");
if(!isPreloadable(linkElement)){return;}
linkElement.addEventListener("mouseout",mouseoutListener,{passive:!0});
urlToPreload=linkElement.href;
preload(linkElement.href);}
function mouseoutListener(event){if(event.relatedTarget&&event.target.closest("a")===event.relatedTarget.closest("a")){return;}
if(mouseoverTimer){clearTimeout(mouseoverTimer);
mouseoverTimer=undefined;}
urlToPreload=undefined;
stopPreloading();}
function isPreloadable(linkElement){if(!linkElement||!linkElement.href){return;}
if(urlToPreload===linkElement.href){return;}
if(useWhitelist&&!("instant" in linkElement.dataset)){return;}
if(!allowExternalLinks&&linkElement.origin!==location.origin&&!("instant" in linkElement.dataset)){return;}
if(!["http:","https:"].includes(linkElement.protocol)){return;}
if(linkElement.protocol==="http:"&&location.protocol==="https:"){return;}
if(!allowQueryString&&linkElement.search&&!("instant" in linkElement.dataset)){return;}
if(linkElement.hash&&linkElement.pathname+linkElement.search===location.pathname+location.search){return;}
if("noInstant" in linkElement.dataset){return;}
return!0;}
function preload(url){prefetcher.href=url;}
function stopPreloading(){prefetcher.removeAttribute("href");}
Enter fullscreen mode Exit fullscreen mode

The default code above is preload everytime user hover to url. I want to change it to preload everytime the page is displayed. So, every url on that page is always preloaded instantly. How to do that?

Regards

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay