Preload Content When Hovering Over Links - jQuery smartPreload

Whether you are taking your visitors on a journey from sign up to sale or just linking to another great article on your website, speed is of the essence.

A study shows that the probability of bounce increases by 32% as page load time goes from 1 second to 3 seconds. In 2006, Amazon found that every 100ms in page load time cost them 1% in sales. 

One of the easiest ways to make a page faster is to preload images and other large assets when the browser is idle. This smart jQuery preload plugin will use JavaScript's fetch API to automatically preload the resources behind links when the user hovers over them (or when they intend to click them). This can greatly reduce the loading time of the destination web page and enhance the user's browsing experience.

Alternative Libraries:

• Preload Pages Based On User’s Intention – instant.page
• InstantClick Library

How to use it:

1. Download and load the smartPreload.js plugin after jQuery library (slim build).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/smartPreload.js"></script>

2. Initialize the plugin on the links within the webpage. That's it.

$(function(){
  // preload everything on mouseover
  $('a').smartPreload();
});

3. Load resources when your mouse is less than 50px from the link.

$(function(){
  $('a').smartPreload(50);
});

---

This awesome jQuery plugin is developed by Lugat. For more Advanced Usages, please check the demo page or visit the official website.