网页背景音乐除了采用框架页面镶套外,想要翻页不被中断播放,一直以来没有什么好的解决办法。今天学到一个新的技能:pjax。

pushState + ajax = pjax ,它带来最直观的效果是整个网站变成类似单页应用。这样的效果将会极大的提升用户体验,并且可以减少https的请求的次数和内容。使用github上面的一个开源项目defunkt/jquery-pjax 可以很轻松的帮助我们实现pjax。

想要在自己的网站上实现pjax功能也很简单,具体步骤如下:
1、js文件引入:

<!-- jQuery引用 -->
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<!-- pjax引入 -->
<script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

以上文件的版本太高有时候会失效。将代码复制加入到header或者footer页面代码中不用刷新的位置即可。注意两个JS先后顺序不能放反。
2、限制范围:

<script>
$(document).pjax('a[href^="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
    container: '#pjax-container',
    fragment: '#pjax-container',
    timeout: 8000
})
</script>

上面代码:<?php Helper::options()->siteUrl()?>是typecho的自带函数,调用本站的首页地址(可根据程序替换)!也就是只对本站的,并且没有_blank属性的,标签里不含no-pjax的链接实行pjax!局部刷新的区域是#pjax-container的部分!

其中#pjax-container是你的局部刷新部分,你可能没有这个div,你自己再添加一个div包裹住你想局部刷新的部分就行了!

<div id="pjax-container">
</div>

3、加载动画:

<script>
$(document).on('pjax:send',
function() {
    $('#loader-wrapper').addClass("in");
})

$(document).on('pjax:complete',
function() {
    $('#loader-wrapper').removeClass("in");
})
</script>

上面代码:就是在pjax执行开始的时候,给#loader-wrapper加上in的样式名称。在pjax结束的时候给给#loader-wrapper去掉in的样式名称,这样就有了加载出现动画,加载后动画消失的效果。

以上第3步不是必需,经过处理后,将背景音乐运行代码放置在不被刷新的位置即可流畅的享受页面切换而音乐不被停止。

标签: 代码, 背景音乐, PJAX, typecho

  

已有 6 条评论

  1. 蓝天 蓝天

    真的可以(;

  2. 👰‍♀️ 👰‍♀️

    歌很好听

  3. 背景音乐是怎么插入的,有教程嘛

    1. 右键-查看源代码或者用插件

添加新评论

歌曲封面
0:00