奇乐网
寻梦xunm
利用Pjax实现网页无刷新加载的详细方法
加入Pjax后,我们的网站可以实现无刷新加载网页,加上一个良好的过度loading动画,这样用户的体验度会更好一些
引入jquery.pjax.js资源
文件一:jquery.min.js
文件二:jquery.pjax.js
包裹刷新区域
自己在网页需要无刷新效果的地方,比如网站的body标签下的一个div id="uum-main" /div包裹着网站的全部内容,那么要刷新uum-mian包裹的内容区域
下一步就是在</body>标签前,添加如下的代码
$(document).pjax('a[target!=_blank]', '#uum-mian', {fragment: '#uum-main',timeout: 8000}); //#uum-mian为刷新的id
$(document).on('pjax:send', function() {
$(".loading").css("display", "block");
//预加载函数可写在这里 .loading为加载动画
});

$(document).on('pjax:complete', function() {
//回调函数
$("img[src$=jpg],img[src$=jpeg],img[src$=png],img[src$=gif]").parent("a[class!=noview]").addClass("swipebox");
if( $('pre').length ){ prettyPrint(); } //回调函数解决文章页代码不高亮的问题
$(".loading").css("display", "none");
//pjax加载结束的回调函数 解决js无法定位的问题
//重新定位容器内容的函数写在这里
});


文章来源:https://www.usuuu.com/article/z0CANFPA
一言不合就认怂
1.54k 20年08月 日常
你觉得对您有所帮助请打赏一点吧。 支付宝:
微信:
目前还没有网友点评过本篇文章