shaosiming

Pjax.js - 实现无刷新加载网页的实现方法

Pjax无刷新简单的可以理解为就是当你在当前页面打开新的页面而不用全部重新加载页面,只需要加载某个部分框架即可。...

关键词: js pjax 无刷新
时间:2019-09-20
查看:
评论:1 条 / 我也去评论
Pjax无刷新简单的可以理解为就是当你在当前页面打开新的页面而不用全部重新加载页面,只需要加载某个部分框架即可。

比如说我只想加载网页中间的部分,并不像重新加载头部或者底部,那么我们只需要把中间部分的框架给加入到pjax当中即可实现每次加载只会刷新中间部分,并不会刷新头部和底部。

而pjax同时支持本地缓存,也就是当你访过1页面记载了1.2.3.4.5个框架部分,但是你用pjax让12部分实现了无刷新,那么进入下一个页面就会只刷新345三个框架,而12是保持不刷新的。

并且支持加载缓冲动画,意识就是告诉访客需要更改的内容正在加载当中,而不是看着网页其他部分没有动以为卡死了,而缓冲动画的目的就是告诉访客你所需要的部分已经在加载当中了,可以说还是比较人性化的。

引入文件 注意:需要jquery1.7.0版本以上支持,我已经给大家准备了CDN加速pjax文件下载

<script src="https://statics.shaosiming.net/js/jquery-1.9.0.js"></script>
<script src="文件夹路径/js/pjax.js"></script>
<!--由于pjax只能本地加载,所以不提供加速-->

请把jquery.js和pajx.hs引入到<head>...</head>内,当然你喜欢的话,也可以是其他地方,最好放在head内。

激活pjax加载 这个只需要放在</body>之前就行了,随便什么地方。

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

需要注意的是:#Graphic是你需要无刷新加载的框架,而我写的是我网站的图文框架的列表元素,需要更改一下,改成你自己的元素。

而a[target!=_blank]hi绑定本页面所有的非新窗口打开的链接,都会实现无刷新加载。如果是新窗口打开的链接,那还是一样的新窗口打开。

基本上到这个时候,已经实现了#Graphic无刷新加载了,如果你已经做完了,那么你就可以刷新一下试试看效果了。

但是如果,我们还想个加载的时候加入一个缓冲的动画怎么办呢?只需要加入pjax提供的缓冲动画接口就行了,代码如下

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

当然了,pjax并提供动画效果,而 pjax_loading 使我们需要在CSS内写入,并且给规定动画样式,这个需要自己动手去做了。

而现在几乎已经全部完成了pjax无刷新加载的效果,可以自己试验一下是不是已经成功了!然后看看有没有其他BUG之类的。

据我所知, 有时候回合ajax无刷新冲突,比如一些网站的评论都是ajax无刷新,也就是评论了就能显示到列表,而有些不是无刷新的,评论以后刷新页面才会出现评论。

这个时候,就要重新解决一下冲突的问题,利用pjax的回调函数重新加载冲突的部分即可。代码如下

<script>
$(document).on('pjax:complete', function() {
    pajx_loadpinglunkuang();//pjax加载完成之后调用重载函数
});
function pajx_loadpinglunkuang(){
	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>

其中loadpinglunkuang是我自己随便写的,意识就是评论框的意识,换成自己冲突的部分就可以了!这样就会你再去触发评论框的时候,就会重新加载评论框了,而不是没有反应。

OK了,这样才是真正的完成了pjax无刷新加载的部署,但是还是有一些问题要说一下了,那就是,,,pjax对SEO很不友好,对搜索引擎也不友好。

所以,如果不太在乎收录和seo的,可以自己爽一爽,效果是杠杠的,但是如果要比较在意收录和seo,还是不要加入的好!个人博客或者喜欢折腾的还是可以使用一下的,给访客一种不一样的感觉!

特别是那种给博客加了背景音乐播放器的,每次打开都重新播放,但是假如这个无刷新以后,音乐可以一直播放下去,在一个页面浏览一个网站都不是问题。
顶一下  
(2)
  100%
踩一下  
(0)
  0%
  • 本文标题:Pjax.js - 实现无刷新加载网页的实现方法
  • 本文链接:https://www.shaosiming.net/html/news/49.html
  • 转载说明:如果没有标明转载均为少司命个人博客原创!转载需要注明出处~
  • 既然都来了,就说点什么吧……
    • 全部评论(0

    JavaScript复制文章时加上版权链接

    在国内版权意识薄弱,特别是在网络这一块,比如我们辛辛苦苦敲了打半天键盘码出来的文章,却被别人ctrl+c 然后ctrl+v 给复...

    JavaScript   js   链接   
    2019-09-05
    91
    2