共有 0 条评论

如何实现整站pjax无刷新异步加载 – 小冉的博客

如何实现整站pjax无刷新异步加载

最近有些朋友经常会问我如何pjax异步加载,或者问网站下面的播放器切换页面的时候为什么音乐不会中断,这就是pjax异步加载的原理,下面我就整理一下供大家参考。

<script>
    //pjax实现
    $(document).pjax('a', '#main', {fragment: '#main', timeout: 5000});
    //pjax开始
    $(document).on('pjax:send', function () {
        $.AMUI.progress.start();
    });
    //pjax结束
    $(document).on('pjax:complete', function () {
        $.AMUI.progress.done();
    });
    //pjax表单提交
    $(document).on('submit', '.pjax_form', function (event) {
        $.pjax.submit(event, '#main', {fragment: '#main', timeout: 6000});
    });
 
</script>

也可以这样写

<script>
$(document).pjax('a[target!=_blank]', '#main', {fragment:'#main', timeout:6000});	
    $(document).on('pjax:send', function() {
	  $('#main').fadeTo(700,0.0);
	  });
    $(document).on('pjax:complete', function() {
	  $('#main').fadeTo(700,1);
	  });
});
    //pjax表单提交
    $(document).on('submit','.search', function (event) {
        $.pjax.submit(event, '#main', {fragment: '#main', timeout: 6000});
    });
</script>
  • 用支付宝打我
  • 用微信打我

你可以像猪一样的生活,但你永远不会像猪一样快乐!!!

6条回应:“如何实现整站pjax无刷新异步加载”

  1. 初秀说道:

    挺不错的啊!

  2. 淑梅说道:

    我欢喜地告诉闺蜜:我终于找到男朋友啦!她语重心长地对我说:“一定要对他好,不要欺负他伤害他有负于他,毕竟他已经瞎了!”

  3. 爱乐檬说道:

    底部的播放器怎么弄得 我的是hermit音乐播放器

  4. 小影子说道:

    给力

发表评论

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