Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Turbolinks Prefetching
const hoverTime = 400
const fetchers = {}
const doc = document.implementation.createHTMLDocument('prefetch')
function fetchPage (url, success) {
const xhr = new XMLHttpRequest()'GET', url)
xhr.setRequestHeader('VND.PREFETCH', 'true')
xhr.setRequestHeader('Accept', 'text/html')
xhr.onreadystatechange = () => {
if (xhr.readyState !== XMLHttpRequest.DONE) return
if (xhr.status !== 200) return
function prefetchTurbolink (url) {
fetchPage(url, responseText => {
const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement)
Turbolinks.controller.cache.put(url, snapshot)
function prefetch (url) {
if (prefetched(url)) return
function prefetched (url) {
return location.href === url || Turbolinks.controller.cache.has(url)
function prefetching (url) {
return !!fetchers[url]
function cleanup (event) {
const element =
element.removeEventListener('mouseleave', cleanup)
document.addEventListener('mouseover', event => {
if (! return
const url =
if (prefetched(url)) return
if (prefetching(url)) return
cleanup(event)'mouseleave', cleanup)
fetchers[url] = setTimeout(() => prefetch(url), hoverTime)

This comment has been minimized.

Copy link

frederikhors commented Sep 26, 2019

let can be changed to const on lines 6, 22, 48.

'url' is never reassigned. Use 'const' instead.eslint(prefer-const)


This comment has been minimized.

Copy link

feliperaul commented Mar 18, 2020

@hopsoft Can you please consider adding xhr.setRequestHeader('Accept', 'text/html') to avoid triggering format.js responses on controllers that use respond_to do |block| syntax, since it's we're always looking for the HTML versions?

That fixed the ActionController::InvalidCrossOriginRequest I was getting on that controller/action.


This comment has been minimized.

Copy link
Owner Author

hopsoft commented Mar 20, 2020

Thanks for suggesting this. I'll get the gist updated.


This comment has been minimized.

Copy link

vitobotta commented Mar 27, 2020

Hi, thanks a lot for this gist! I've tried adding the touchstart event too for mobile but it doesn't seem to work. Any suggestions? Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.