• 售前

  • 售后

热门帖子
入门百科

教你实现WordPress博客的“预加载”功能

[复制链接]
ffycxyw2274436 显示全部楼层 发表于 2021-8-15 19:51:49 |阅读模式 打印 上一主题 下一主题
chrome浏览器为什么比一样寻常的浏览器快呢?缘故原由是chrome浏览器给全部页面都弄了预加载功能。
目前可能照旧有少部分人在使用的,就是InstantClick,它相当于一个JS库,运行的原理雷同“预加载”
使用mouseover()、mousedown()、mouseout()实行整个过程,运行原理:当鼠标移到链接上时,就已经开始加载页面了,从鼠标悬停该链接到点击链接这中间有那么几百毫秒的间隔,此时页面已经加载得差不多,那么在真正打开页面时就即是直接表现,速率会非常快。以是这不但纯是Ajax,而是 pushState+Ajax ,便是PJAX,雷同于整个页面的Ajax(和真实的Ajax有区别)。
下载本文附件将内里的两个js放在主题目次的js文件夹,之后可以在footer.php在</body>标签之前引用,引用代码:
  1. <script type=”text/javascript” src=”<?php _fcksavedurl="”<?php" bloginfo(‘template_directory’); ?>/js/instantclick.min.js” data-no-instant>
  2. </script>
  3. <script data-no-instant>
  4. InstantClick.init();
  5. </script>
复制代码
然后就大功告成了,点击打开页面,你会发现顶部另有一个加载进度条,可以通过CSS来修改其样式。
这个效果有时会与一些Ajax效果辩说,比如评论Ajax,因为InstantClick是针对body的,固然评论模板会包罗在内,以是当你不希望某一地域使用InstantClick效果时,可以用<div data-no-instant>和</div> 这个声明来包罗该地域,在data-no-instant地域内的点击事件就都不会触发预加载,云云一来就可以做到比较好的兼容效果了。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作