欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > cms使用教程 > wordpress使用教程 >

教你实现WordPress博客的“预加载”成果

发布时间:2016-12-02  编辑:杨雨个人博客网站   点击:   

Wordpress博客 Wordpress网站 页面预加载

chrome赏识器为什么比一样平常的赏识器快呢?缘故起因是chrome赏识器给所有页面都弄了预加载成果。

今朝也许照旧有少部门人在行使的,就是InstantClick,它相等于一个JS库,运行的道理相同“预加载”

操作mouseover()、mousedown()、mouseout()执行整个进程,运行道理:当鼠标移到链接上时,就已经开始加载页面了,从鼠标悬停该链接到点击链接这中间有那么几百毫秒的隔断,此时页面已经加载得差不多,那么在真正打开页面时就便是直接表现,速率会很是快。以是这不光纯是Ajax,而是 pushState+Ajax ,等于PJAX,相同于整个页面的Ajax(和真实的Ajax有区别)。

下载本文附件将内里的两个js放在主标题次的js文件夹,之后可以在footer.php在</body>标签之前引用,引用代码:

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

</script>

<script data-no-instant>

InstantClick.init();

</script>

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

这个结果偶然会与一些Ajax结果斗嘴,好比评述Ajax,由于InstantClick是针对body的,虽然评述模板会包括在内,以是当你不但愿某一地区行使InstantClick结果时,可以用<div data-no-instant>和</div> 这个声明来包括该地区,在data-no-instant地区内的点击变乱就都不会触发预加载,云云一来就可以做到较量好的兼容结果了。

本文地址:http://itbyc.com/cms/wordpress/14345.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1