Browse Source

Always add a new <link rel="prefetch"> element to the head when prefetching a link

Removes stopPreloading()
Alexandre Dieulot 5 years ago
parent
commit
f411e1992e
1 changed files with 8 additions and 42 deletions
  1. 8 42
      instantpage.js

+ 8 - 42
instantpage.js

@@ -1,11 +1,10 @@
 /*! instant.page v2.0.1 - (C) 2019 Alexandre Dieulot - https://instant.page/license */
 /*! instant.page v2.0.1 - (C) 2019 Alexandre Dieulot - https://instant.page/license */
 
 
-let urlToPreload
 let mouseoverTimer
 let mouseoverTimer
 let lastTouchTimestamp
 let lastTouchTimestamp
 
 
-const prefetcher = document.createElement('link')
-const isSupported = prefetcher.relList && prefetcher.relList.supports && prefetcher.relList.supports('prefetch')
+const prefetchElement = document.createElement('link')
+const isSupported = prefetchElement.relList && prefetchElement.relList.supports && prefetchElement.relList.supports('prefetch')
                     && window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype
                     && window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype
 const isDataSaverEnabled = navigator.connection && navigator.connection.saveData
 const isDataSaverEnabled = navigator.connection && navigator.connection.saveData
 const allowQueryString = 'instantAllowQueryString' in document.body.dataset
 const allowQueryString = 'instantAllowQueryString' in document.body.dataset
@@ -42,9 +41,6 @@ if ('instantIntensity' in document.body.dataset) {
 }
 }
 
 
 if (isSupported && !isDataSaverEnabled) {
 if (isSupported && !isDataSaverEnabled) {
-  prefetcher.rel = 'prefetch'
-  document.head.appendChild(prefetcher)
-
   const eventListenersOptions = {
   const eventListenersOptions = {
     capture: true,
     capture: true,
     passive: true,
     passive: true,
@@ -82,7 +78,7 @@ if (isSupported && !isDataSaverEnabled) {
           if (entry.isIntersecting) {
           if (entry.isIntersecting) {
             const linkElement = entry.target
             const linkElement = entry.target
             intersectionObserver.unobserve(linkElement)
             intersectionObserver.unobserve(linkElement)
-            preload(linkElement.href, true)
+            preload(linkElement.href)
           }
           }
         })
         })
       })
       })
@@ -107,18 +103,9 @@ function touchstartListener(event) {
     return
     return
   }
   }
 
 
-  linkElement.addEventListener('touchcancel', touchendAndTouchcancelListener, {passive: true})
-  linkElement.addEventListener('touchend', touchendAndTouchcancelListener, {passive: true})
-
-  urlToPreload = linkElement.href
   preload(linkElement.href)
   preload(linkElement.href)
 }
 }
 
 
-function touchendAndTouchcancelListener() {
-  urlToPreload = undefined
-  stopPreloading()
-}
-
 function mouseoverListener(event) {
 function mouseoverListener(event) {
   if (performance.now() - lastTouchTimestamp < 1100) {
   if (performance.now() - lastTouchTimestamp < 1100) {
     return
     return
@@ -132,8 +119,6 @@ function mouseoverListener(event) {
 
 
   linkElement.addEventListener('mouseout', mouseoutListener, {passive: true})
   linkElement.addEventListener('mouseout', mouseoutListener, {passive: true})
 
 
-  urlToPreload = linkElement.href
-
   mouseoverTimer = setTimeout(() => {
   mouseoverTimer = setTimeout(() => {
     preload(linkElement.href)
     preload(linkElement.href)
     mouseoverTimer = undefined
     mouseoverTimer = undefined
@@ -149,8 +134,6 @@ function mousedownListener(event) {
 
 
   linkElement.addEventListener('mouseout', mouseoutListener, {passive: true})
   linkElement.addEventListener('mouseout', mouseoutListener, {passive: true})
 
 
-  urlToPreload = linkElement.href
-
   preload(linkElement.href)
   preload(linkElement.href)
 }
 }
 
 
@@ -163,10 +146,6 @@ function mouseoutListener(event) {
     clearTimeout(mouseoverTimer)
     clearTimeout(mouseoverTimer)
     mouseoverTimer = undefined
     mouseoverTimer = undefined
   }
   }
-
-  urlToPreload = undefined
-
-  stopPreloading()
 }
 }
 
 
 function isPreloadable(linkElement) {
 function isPreloadable(linkElement) {
@@ -174,10 +153,6 @@ function isPreloadable(linkElement) {
     return
     return
   }
   }
 
 
-  if (urlToPreload == linkElement.href) {
-    return
-  }
-
   if (useWhitelist && !('instant' in linkElement.dataset)) {
   if (useWhitelist && !('instant' in linkElement.dataset)) {
     return
     return
   }
   }
@@ -209,18 +184,9 @@ function isPreloadable(linkElement) {
   return true
   return true
 }
 }
 
 
-function preload(url, isFromViewport) {
-  if (!isFromViewport) {
-    prefetcher.href = url
-  }
-  else {
-    const additionalPrefetcher = document.createElement('link')
-    additionalPrefetcher.rel = 'prefetch'
-    additionalPrefetcher.href = url
-    document.head.appendChild(additionalPrefetcher)
-  }
-}
-
-function stopPreloading() {
-  prefetcher.removeAttribute('href')
+function preload(url) {
+  const prefetcher = document.createElement('link')
+  prefetcher.rel = 'prefetch'
+  prefetcher.href = url
+  document.head.appendChild(prefetcher)
 }
 }