Preload on hover?

twitter logo github logo ・1 min read

Hi. I wonder about the preload technique. For example, I have a code piece like below:

const links = document.querySelectorAll('a')

Array.from(links).forEach((link) => {

    link.addEventListener("mouseenter", () => {

        const xhr = new XMLHttpRequest()

        xhr.open("GET", link.href)
        xhr.send()

    })

})

or with Fetch

const links = document.querySelectorAll('a')

Array.from(links).forEach((link) => {

    link.addEventListener("mouseenter", () => {

        fetch(link.href, { cache: "force-cache" })

    })

})

Can this code help to improve performance? We have a real estate project. Properties have too many items like images, text etc.

Actually, I couldn't understand if this was working as expected.

What do you think about that?

twitter logo DISCUSS (4)
markdown guide
 

You could check it in the Network-Tab in your DevTools. Dev.to is using something similar. What you could do is to cache the results in an array, and on click replace the HTML of the page with the fetched one, which would give you kind-of-instant page-loads.

 

I checked now. Looks really useful. I should implement it. Thanks.

 

It can. This is one of the techniques Gatsby uses. You can read about the PRPL pattern and other performance techniques here, gatsbyjs.org/docs/prpl-pattern/

 

I didn't use Gatsby before. I think The PRPL Pattern can help us in our project.

Classic DEV Post from May 6

Thoughts on legacy code, diversity and inclusion

TLDR; If you're still dropping snarky commentaries about PHP on Twitter, just grow up already.

Ali GOREN profile image
I'm a front-end developer. I'm living in Turkey. I started my professional career in 2016. I also interest in Backend, SQL technologies.