diff --git a/flying-pages.js b/flying-pages.js index f75c969..39d0f96 100644 --- a/flying-pages.js +++ b/flying-pages.js @@ -14,6 +14,11 @@ const isSlowConnection = (navigator.connection.saveData || (navigator.connection.effectiveType || "").includes("2g")); +// Check browser is IE +const isIE = + navigator.userAgent.indexOf("MSIE ") > -1 || + navigator.userAgent.indexOf("Trident/") > -1; + // Prefetch the given url using native 'prefetch'. Fallback to 'xhr' if not supported const prefetch = url => { // Prefetch using native prefetch @@ -69,7 +74,7 @@ const addUrlToQueue = (url, processImmediately = false) => { }; // Observe the links in viewport, add url to queue if found intersecting -const observer = new IntersectionObserver(entries => { +const linksObserver = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const url = entry.target.href; @@ -135,7 +140,7 @@ const requestIdleCallback = // Stop preloading in case server is responding slow/errors const stopPreloading = () => { // Find all links are remove it from observer (viewport) - document.querySelectorAll("a").forEach(e => observer.unobserve(e)); + document.querySelectorAll("a").forEach(e => linksObserver.unobserve(e)); // Clear pending links in queue toPrefetch.clear(); @@ -147,8 +152,8 @@ const stopPreloading = () => { }; function flyingPages(options = {}) { - // Don't start preloading if user is on a slow connection - if (isSlowConnection) return; + // Don't start preloading if user is on a slow connection or browser is IE + if (isSlowConnection || isIE) return; // Default options incase options is not set const defaultOptions = { @@ -167,7 +172,8 @@ function flyingPages(options = {}) { // Start preloading links in viewport on idle callback, with a delay requestIdleCallback(() => setTimeout( - () => document.querySelectorAll("a").forEach(e => observer.observe(e)), + () => + document.querySelectorAll("a").forEach(e => linksObserver.observe(e)), window.FPConfig.delay * 1000 ) ); diff --git a/flying-pages.min.js b/flying-pages.min.js index 3d7107d..e588269 100644 --- a/flying-pages.min.js +++ b/flying-pages.min.js @@ -1 +1 @@ -const toPrefetch=new Set,alreadyPrefetched=new Set,prefetcher=document.createElement("link"),isNativePrefetchSupported=prefetcher.relList&&prefetcher.relList.supports&&prefetcher.relList.supports("prefetch"),isSlowConnection=navigator.connection&&(navigator.connection.saveData||(navigator.connection.effectiveType||"").includes("2g")),prefetch=e=>isNativePrefetchSupported?new Promise((t,r)=>{const o=document.createElement("link");o.rel="prefetch",o.href=e,o.onload=t,o.onerror=r,document.head.appendChild(o)}):new Promise((t,r)=>{const o=new XMLHttpRequest;o.open("GET",e,o.withCredentials=!0),o.onload=(()=>{200===o.status?t():r()}),o.send()}),prefetchWithTimeout=e=>{const t=setTimeout(()=>stopPreloading(),5e3);prefetch(e).catch(()=>stopPreloading()).finally(()=>clearTimeout(t))},addUrlToQueue=(e,t=!1)=>{if(alreadyPrefetched.has(e)||toPrefetch.has(e))return;const r=window.location.origin;if(e.substring(0,r.length)===r&&window.location.href!==e){for(let t=0;t{e.forEach(e=>{if(e.isIntersecting){const t=e.target.href;addUrlToQueue(t,!window.FPConfig.maxRPS)}})}),startQueue=()=>setInterval(()=>{Array.from(toPrefetch).slice(0,window.FPConfig.maxRPS).forEach(e=>{prefetchWithTimeout(e),alreadyPrefetched.add(e),toPrefetch.delete(e)})},1e3);let hoverTimer=null;const mouseOverListener=e=>{const t=e.target.closest("a");t&&t.href&&!alreadyPrefetched.has(t.href)&&(hoverTimer=setTimeout(()=>{addUrlToQueue(t.href,!0)},window.FPConfig.hoverDelay))},touchStartListener=e=>{const t=e.target.closest("a");t&&t.href&&!alreadyPrefetched.has(t.href)&&addUrlToQueue(t.href,!0)},mouseOutListener=e=>{const t=e.target.closest("a");t&&t.href&&!alreadyPrefetched.has(t.href)&&clearTimeout(hoverTimer)},requestIdleCallback=window.requestIdleCallback||function(e){const t=Date.now();return setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-t))}})},1)},stopPreloading=()=>{document.querySelectorAll("a").forEach(e=>observer.unobserve(e)),toPrefetch.clear(),document.removeEventListener("mouseover",mouseOverListener,!0),document.removeEventListener("mouseout",mouseOutListener,!0),document.removeEventListener("touchstart",touchStartListener,!0)};function flyingPages(e={}){if(isSlowConnection)return;window.FPConfig=Object.assign({delay:0,ignoreKeywords:[],maxRPS:3,hoverDelay:50},e),startQueue(),requestIdleCallback(()=>setTimeout(()=>document.querySelectorAll("a").forEach(e=>observer.observe(e)),1e3*window.FPConfig.delay));const t={capture:!0,passive:!0};document.addEventListener("mouseover",mouseOverListener,t),document.addEventListener("mouseout",mouseOutListener,t),document.addEventListener("touchstart",touchStartListener,t)} +const toPrefetch=new Set,alreadyPrefetched=new Set,prefetcher=document.createElement("link"),isNativePrefetchSupported=prefetcher.relList&&prefetcher.relList.supports&&prefetcher.relList.supports("prefetch"),isSlowConnection=navigator.connection&&(navigator.connection.saveData||(navigator.connection.effectiveType||"").includes("2g")),isIE=navigator.userAgent.indexOf("MSIE ")>-1||navigator.userAgent.indexOf("Trident/")>-1,prefetch=e=>isNativePrefetchSupported?new Promise((t,r)=>{const o=document.createElement("link");o.rel="prefetch",o.href=e,o.onload=t,o.onerror=r,document.head.appendChild(o)}):new Promise((t,r)=>{const o=new XMLHttpRequest;o.open("GET",e,o.withCredentials=!0),o.onload=(()=>{200===o.status?t():r()}),o.send()}),prefetchWithTimeout=e=>{const t=setTimeout(()=>stopPreloading(),5e3);prefetch(e).catch(()=>stopPreloading()).finally(()=>clearTimeout(t))},addUrlToQueue=(e,t=!1)=>{if(alreadyPrefetched.has(e)||toPrefetch.has(e))return;const r=window.location.origin;if(e.substring(0,r.length)===r&&window.location.href!==e){for(let t=0;t{e.forEach(e=>{if(e.isIntersecting){const t=e.target.href;addUrlToQueue(t,!window.FPConfig.maxRPS)}})}),startQueue=()=>setInterval(()=>{Array.from(toPrefetch).slice(0,window.FPConfig.maxRPS).forEach(e=>{prefetchWithTimeout(e),alreadyPrefetched.add(e),toPrefetch.delete(e)})},1e3);let hoverTimer=null;const mouseOverListener=e=>{const t=e.target.closest("a");t&&t.href&&!alreadyPrefetched.has(t.href)&&(hoverTimer=setTimeout(()=>{addUrlToQueue(t.href,!0)},window.FPConfig.hoverDelay))},touchStartListener=e=>{const t=e.target.closest("a");t&&t.href&&!alreadyPrefetched.has(t.href)&&addUrlToQueue(t.href,!0)},mouseOutListener=e=>{const t=e.target.closest("a");t&&t.href&&!alreadyPrefetched.has(t.href)&&clearTimeout(hoverTimer)},requestIdleCallback=window.requestIdleCallback||function(e){const t=Date.now();return setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-t))}})},1)},stopPreloading=()=>{document.querySelectorAll("a").forEach(e=>linksObserver.unobserve(e)),toPrefetch.clear(),document.removeEventListener("mouseover",mouseOverListener,!0),document.removeEventListener("mouseout",mouseOutListener,!0),document.removeEventListener("touchstart",touchStartListener,!0)};function flyingPages(e={}){if(isSlowConnection||isIE)return;window.FPConfig=Object.assign({delay:0,ignoreKeywords:[],maxRPS:3,hoverDelay:50},e),startQueue(),requestIdleCallback(()=>setTimeout(()=>document.querySelectorAll("a").forEach(e=>linksObserver.observe(e)),1e3*window.FPConfig.delay));const t={capture:!0,passive:!0};document.addEventListener("mouseover",mouseOverListener,t),document.addEventListener("mouseout",mouseOutListener,t),document.addEventListener("touchstart",touchStartListener,t)}