论pjax无刷新跳转不打断歌曲的方法

pjax是什么?

pjax在生活中用的比较少,但随着网站开发的逐渐完善,好多网站都是为了体验感十足,大多具有娱乐性质,但是此时出现了一种情况,在网站出现背景音乐的时候,你点击其他链接,网站会被刷新播放的音乐就会打断重新播放,而pjax正是解决打断歌曲的方法,可以使你点击其他页面时不会刷新页面和打断歌曲。

pjax经典使用案例如下

百度网盘

百度网盘在点击文件目录的时候就是采用了pjax的技术,点击目录的时候不会刷新网站,提高了用户的体验。

本博客网站

本网站左下角就有一个音乐播放器,在点击开始播放之后点击文章时并不会刷新网站和打断歌曲,不会让你听歌时点击文章打断歌曲而感到烦躁。

实现原理

为了能够处理问题, 我们需要能够理解pjax的运作方式。 pjax的代码只有一个文件: https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js
如果有能力, 可以自己去看一遍。

pjax项目地址在  https://github.com/defunkt/jquery-pjax

此功能的实现我用的是jquery-2.1.4.min.jsjquery.pjax.js

我也会将案例打包给你们参考。直接看代码容易理解。

我写了个小案例供大家参考

案例在线演示地址是:http://a.xbwl8.cn

案例下载地址是:点击此处下载

点赞
  1. 演员说道:
    Google Chrome Windows 7
    到现在我也不太明白 -.-
    1. 小弟 小弟说道:
      Google Chrome Windows 10
      看看实例代码,看代码更容易搞懂,我也是研究了好长时间才搞懂。
  2. 自考专业说道:
    Sogou Explorer Windows 7
    有点难理解啊,还是要努力学习的我
    1. 小弟 小弟说道:
      Google Chrome Windows 7
      这个确实,刚开始我用html做了好多实验但是都不成功,所以我觉得还得php才可以实现,看一下示例代码就容易懂了
  3. myf说道:
    WebView Android 11
    音乐呢?音乐在哪里
    1. 小弟 小弟说道:
      WebView Android 11
      音乐用百度搜“宅music”生成js挂载到主页就行
  4. Abbas Malik说道:
    Google Chrome Windows 10
    I've been struggling with [issue], and your post provided the solution I needed. Thanks for saving me hours of frustration! Soni Typing Tutor Activation Key Free

发表回复

电子邮件地址不会被公开。必填项已用 * 标注