instantclick.js利用用户点击链接或者悬浮在链接上的时候,对新页面进行预加载。
使得访问新页面的时候能够实现更快速度打开甚至秒开的情况,对于用户体验有着极大的提升。
instantclick.js在页面跳转时通过对body体和title替换进行快速加载。
因此这将意味着你的网页并不是真正的跳转到那个新的页面。
所以如果你的新页面中定义了一些DOMContentLoaded或jQuery.ready()触发的初始化动作都不会进行执行。
当然可以通过instantclick.js提供的监听事件来解决这个问题。
instantclick.js在用户点击链接的时候,预置了一个顶部的加载条。
当然了,这个进度条进度条是假的,只是让用户意识到将要发生页面的跳转。
默认情况,进度条的颜色是#29d,可以用CSS改变配色。
#instantclick-bar
{
background: white;
}
/*可以消失*/
#instantclick
{
display: none;
}
instantclick.js提供了多种预加载的方案,需要根据您的网站场景进行选择。
关于加速模式的选择主要根据服务器所能接受的开销能力选择即可。
首先,需要下载一个instantclick.js到您网站本地。
下载地址:http://instantclick.io/download
<!-- 引入JS -->
<script src="js/instantclick.min.js"></script>
<!-- data-no-instant表示该标签不进行预加载 -->
<script data-no-instant>
//选择点击瞬间预加载模式
InstantClick.init("mousedown");
</script>
instantclick.js提供了4个事件用于进行调用开发。
这里比较常用的是change事件,前文中提到instantclick.js会使得一些新页面中定义的初始化JS操作失效,通过change就可以达到兼容。
<script data-no-instant>
InstantClick.on("change", function() {
//比如新页面有个初始化表单数据的方法
initFormNumber();
});
InstantClick.init();
</script>
data-no-instant:黑名单
黑名单的链接,添加一个data-no-instant属性,表示该页面不需要预加载
<a href="logOut.html" data-no-instant>注销登录</a>
如果页面有区域的多个链接都不需要预加载,可以通过指定父级标签方式实现。
<div class="conf" data-no-instant>
<a href="logOut.html">注销登录</a>
<a href="changePwd.html">修改密码</a>
</div>
data-instant:白名单
这个与黑名单相反,属于指明一定需要预加载的链接。
白名单优先级高于黑名单。
<div class="conf" data-no-instant>
<!-- 注销登录链接的预加载依旧生效 -->
<a href="maps.html" data-instan>全站地图</a>
<a href="changePwd.html">修改密码</a>
</div>
当前还没有观点发布,欢迎您留下足迹!
在业务中我们会出现不同的项目依赖与不同版本的 node.js,总不能每次跑项目的时候都去重新安装对应版本的 node.js 和依赖,使用 nvm 可以让多个版本的 node.js 共存,并提供管理和切换
自Jquery1.7起,on()方法是 bind()、live()、delegate() 方法的新的替代品,我们推荐使用on()来处理业务中的事件绑定,通过理解这些方法的差异能够更加清晰明白使用on()方法的优势所在
严谨的页面开发需要着重关注前台校验相关的内容,确保请求参数的合法以保证服务器安全,界面参数众多需要建立一个公共方法,公共校验器的核心方法是Jquery.bind()
绝大多数网站都会有个顶部导航,对于手机端而言为了便于访问导航常常会做固顶操作,通过CSS样式配合Jquery的scroll()方法或原生JS监听滑动事件方法,可以轻松实现下滑隐藏,上滑显示的效果
跨站脚本攻击是比较严重的一种攻击行为,恶意脚本注入到相关页面字段中轻易获取敏感信息和向后端发起请求,前端应用应当对请求数据进行编码
HTML 中加载 SVG 有很多种方式,但如果需要在 HTML 中通过 CSS 样式自由控制 SVG 样式就必须将 svg 标签插入网页找那个成为 DOM 的一部分,本文借助 SVGInject 插件可以快速完成这一操作