悬停在链接上时预加载内容 jQuery smartPreload

  • 源码大小:5.29KB
  • 所需积分:1积分
  • 源码编号:19JP-3266
  • 浏览次数:583次
  • 最后更新:2023年05月24日
  • 所属栏目:加载
本站默认解压密码:19jp.com 或 19jp_com

简介

无论你是带着访客从注册到销售,还是只是链接到网站上的另一篇精彩文章,速度都至关重要。

一项研究表明,随着页面加载时间从1秒到3秒,反弹的概率增加了32%。2006年,亚马逊发现,页面加载时间每100毫秒,他们的销售额就会下降1%

使页面更快的最简单方法之一是在浏览器空闲时预加载图像和其他大型资产。这个智能jQuery预加载插件将使用JavaScript的fetch API,在用户将鼠标悬停在链接上方(或打算单击链接时)时,自动预加载链接背后的资源。这可以大大减少目标网页的加载时间,并增强用户的浏览体验。

备选库:

  • 基于用户意图的预加载页面instant.page
  • InstantClick库

如何使用它:

1.在jQuery库(slim build)之后下载并加载smartPreload.js插件。

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

2.在网页中的链接上初始化插件。就是这样。

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

3.当鼠标距离链接小于50px时加载资源。

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

预览截图