整合pjax无刷新翻页加载配合悬乎播放器完美

1年前 (2024-03-09)阅读4385回复0
纳兰叶
纳兰叶
  • 管理员
  • 注册排名1
  • 经验值799
  • 级别管理员
  • 主题157
  • 回复7
楼主

整合pjax无刷新翻页加载配合悬乎播放器完美

整合pjax无刷新翻页加载配合悬乎播放器完美

一:整合pjax的准备工作;

    检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入

  1. 新浪CDN提速:

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script>

2.下载本地化jq:(本文底部)

<script type="text/javascript" src="....自己写...../jquery.js"></script>

1.7.0版本以上的才有pushState的封装。

二:开始整合Pjax;

     1.下载pjax.js (本文底部);

     2.在你喜欢的位置(最好body代码结束前)引入pjax.js;

三:使用pjax;

    编辑模版footer.php在</body>标记结束前插入:

<script>
    $(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
</script>

四:解决pjax的缓冲--加入等待动画;

    pjax.js提供了两个接口;

<div class="pjax_loading"></div>
<script>
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".pjax_loading").css("display", "none");
});
</script>

当然要为pjax_loading定义css,这里就不多说了。


五:解决pjax之后,容器中一些jq事件失效的问题;


    问题比如:pjax之后多说评论框不加载,ajax评论不能提交等等问题。

    问题原因:原先容器绑定的事件被新容器替换掉了,新容器的div没有绑定事件,所以点击无效。

    解决方法:利用pjax的加载完成回调函数,重新绑定事件。

    例:

<script>
$(document).on('pjax:complete', function() {
    pajx_loadDuodsuo();//pjax加载完成之后调用重载多说函数
});
function pajx_loadDuodsuo(){
    var dus=$(".ds-thread");
    if($(dus).length==1){
        var el = document.createElement('div');
        el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
        el.setAttribute('data-url',$(dus).attr("data-url"));
        DUOSHUO.EmbedThread(el);
        $(dus).html(el);
    }
}
</script>OK,我们发现多说可以正常载入了。


六:全部代码汇总一下,就是这样:


<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" src="你的域名/pjax.js"></script>
<div class="pjax_loading"></div>
<script>
$(document).pjax('a[target!=_blank]', '#contentleft', {fragment:'#contentleft', timeout:8000});
$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画;
    $(".pjax_loading").css("display", "block");
});
$(document).on('pjax:complete', function() { //pjax链接加载完成后隐藏加载动画;
    $(".pjax_loading").css("display", "none");
    pajx_loadDuodsuo();
});
function pajx_loadDuodsuo(){
    var dus=$(".ds-thread");
    if($(dus).length==1){
        var el = document.createElement('div');
        el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
        el.setAttribute('data-url',$(dus).attr("data-url"));
        DUOSHUO.EmbedThread(el);
        $(dus).html(el);
    }
}
</script>


这句话是什么意思呢?--绑定本页面非新窗口打开的所有本域链接,链接点击之后,替换contentleft的容器的内容为新内容contentleft,ajax超时时间8秒;

    OK,因为每个模版的替换区不同,修改掉contentleft容器,保存。

    现在看看,是否可以无刷新加载了?


以上内容仅代表作者观点,甚至可能并非原创,如遇未经考证信息需持审慎态度。若有疑问,可联系本站处理。

本文地址:https://www.nly3355.cn/53-3366.html

0
我空虚,我寂寞,还感觉有点冷!
回帖

整合pjax无刷新翻页加载配合悬乎播放器完美 期待您的回复!

您需要 登录账户 后才能发表评论
取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息