村里唯一的希望

网页设计群:706684

Album
利用Pjax实现网页无刷新加载的详细方法
  JavaScript     2020-01-10     70     0

加入Pjax后,我们的网站可以实现无刷新加载网页,加上一个良好的过度loading动画,这样用户的体验度会更好一些

引入jquery.pjax.js资源

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.pjax.js" type="text/javascript"></script>

包裹刷新区域

自己在网页需要无刷新效果的地方,比如网站的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无法定位的问题
//重新定位容器内容的函数写在这里
});

最新评论
  • 脑婆最大!!! 2020年01月25日
    我的城市缺个你
  • 小生不才 2020年01月19日
    好好看的个人博客

  • @_@、 2020年01月18日
    你的评论功能,指自己写的代码吗
  • me 2020年01月18日
    这设计真好看,想知道是做ux的吗
  • 悠悠 2020年01月17日
    可有可无 不打算加了
  • 唤( . )醒 2020年01月17日
    视频列表 点击封面不能跳转
  • A 王小五 2020年01月10日
    挡着没有用,我都看到了!
  • 演员 2020年01月10日
    友联-.-
  • 悠悠 2020年01月10日
    就用用嘛
  • 唤( . )醒 2020年01月10日
    用我的主题壁纸