浏览代码

Preload on touchstart

Alexandre Dieulot 6 年之前
父节点
当前提交
2e96f42a18
共有 1 个文件被更改,包括 36 次插入2 次删除
  1. 36 2
      instantpage.js

+ 36 - 2
instantpage.js

@@ -2,6 +2,7 @@
 
 let urlToPreload
 let mouseoverTimer
+let lastTouchTimestamp
 
 const prefetcher = document.createElement('link')
 const isSupported = prefetcher.relList && prefetcher.relList.supports && prefetcher.relList.supports('prefetch')
@@ -10,13 +11,46 @@ if (isSupported) {
   prefetcher.rel = 'prefetch'
   document.head.appendChild(prefetcher)
 
-  document.addEventListener('mouseover', mouseoverListener, {
+  const eventListenersOptions = {
     capture: true,
     passive: true,
-  })
+  }
+  document.addEventListener('touchstart', touchstartListener, eventListenersOptions)
+  document.addEventListener('mouseover', mouseoverListener, eventListenersOptions)
+}
+
+function touchstartListener(event) {
+  /* Chrome on Android calls mouseover before touchcancel so `lastTouchTimestamp`
+   * must be assigned on touchstart to be measured on mouseover. */
+  lastTouchTimestamp = performance.now()
+
+  const linkElement = event.target.closest('a')
+
+  if (!linkElement) {
+    return
+  }
+
+  if (!isPreloadable(linkElement)) {
+    return
+  }
+
+  linkElement.addEventListener('touchcancel', touchendAndTouchcancelListener, {passive: true})
+  linkElement.addEventListener('touchend', touchendAndTouchcancelListener, {passive: true})
+
+  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 (!linkElement) {