大侠阿木博客
大侠阿木博客

WordPress极速“预加载”

目前可能还是有少部分人在使用的,就是InstantClick,它相当于一个JS库,运行的原理类似“预加载”,原介绍如下:

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click.

InstantClick uses pushState and Ajax (a combo known as pjax), replacing only the body and the title in the head.

利用mouseover()、mousedown()、mouseout()执行整个过程,运行原理:当鼠标移到链接上时,就已经开始加载页面了,从鼠标悬停该链接到点击链接这中间有那么几百毫秒的间隔,此时页面已经加载得差不多,那么在真正打开页面时就等于直接显示,速度会非常快。所以这不单纯是Ajax,而是 pushState+Ajax ,即是PJAX,类似于整个页面的Ajax(和真实的Ajax有区别)。

使用方法

首先是下载这个InstantClick.js,在本篇末见下载地址。你也可以到官方网站下载:
http://instantclick.io/
将instantclick.js放在主题目录的js文件夹,之后可以在footer.php在标签之前引用,引用代码:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/instantclick.min.js" data-no-instant></script>

然后就大功告成了,点击打开页面,你会发现顶部还有一个加载进度条,可以通过CSS来修改其样式。

声明忽略区域

这个效果有时会与一些Ajax效果冲突,比如评论Ajax,因为InstantClick是针对body的,当然评论模板会包含在内,所以当你不希望某一区域使用InstantClick效果时,可以用<div data-no-instant></div>这个声明来包含该区域,在data-no-instant区域内的点击事件就都不会触发预加载,如此一来就可以做到比较好的兼容效果了。

原文:http://www.inlojv.com/wordpress-pre-loading-speed-open-page.html

#
首页      Wordpress      WordPress极速“预加载”

推荐文章

大侠阿木博客

WordPress极速“预加载”
目前可能还是有少部分人在使用的,就是InstantClick,它相当于一个JS库,运行的原理类似“预加载”,原介绍如下: Before visitors click on a link, they hover over that link. Between t…
扫描二维码继续阅读
2014-11-01