EMLOG无刷新翻页加载教程

2015年5月19日

2015年5月19日 7条评论收藏

EMLOG无刷新翻页加载教程

其实就是Pjax局部无刷新，这个东西很早人问，为什么别人博客的翻页播放歌曲不会中断，我也算是一个吧，一开始，看到王小刀，刘培杰等人的博客都有，自己也很想弄，可是像我这种小白，度娘的资料完全看不懂！需要傻瓜式的教程，正好，鬼少博客放出教程，虽然，写得很清楚，但对于我这样的新手来说，搞了几天才有点眉目，这里我转载过来，大家可以看看，学习下。当然，要播放器的可以去鬼少博客申请接口，地址是：http://tv1314.com .如果你有别的播放器，这一步省略！

接下来看教程

教程开始

一：整合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>

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

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

现在看看，是否可以无刷新加载了？

四：解决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>

所需的附件

百度网盘下载地址：http://pan.baidu.com/s/1kTsw6OZ

360 网盘下载地址：http://yunpan.cn/cjCMBENwir9Tt （提取码：8eb2）

1005