最新活动:电脑PC端+手机端+微网站+自适应网页多模板选择-建站388元起价!!!
当前位置:主页 > 网站建设 > 织梦DedeCMS利用Pjax实现网页无刷新加载的详细教程

织梦DedeCMS利用Pjax实现网页无刷新加载的详细教程

时间:2023-05-26 11:05:26 阅读: 文章分类: 网站建设 作者: 建站小能手

导读:程序开发程序开发很多朋友在找织梦网站实现PJAX的教程,这里淘站网整理了一篇文章来统一解决大家的问题! 加入 Pjax 后,我们的网站可以实现无刷新加载网页,加上一个良好的过度网站优化seo培训网站建设多少钱。

网站优化seo培训网站建设多少钱很多朋友在找织梦网站实现PJAX的教程,这里淘站网整理了一篇文章来统一解决大家的问题! 加入 Pjax 后,我们的网站可以实现无刷新加载网页,加上一个良好的过度 loading 动画,这样用 […]

很多朋友在找织梦网站实现PJAX的教程,这里淘站网整理了一篇文章来统一解决大家的问题!

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

引入jquery.pjax.js资源

在网站的标签前加入如下资源引入代码:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>     //如网站已引入jquery , 可以忽略 <script src="https://api.dyboy.cn/static/js/jquery.pjax.js" type="text/javascript"></script>

包裹刷新区域

自己在网页需要无刷新效果的地方,比如网站的 body 标签下的一个 包裹着网站的全部内容,那么要刷新 wrap 包裹的内容区域。

下一步,就是在标签前,添加如下的代码:

<script type="text/javascript"> $(document).pjax('a[target!=_blank]', '#wrap', {fragment: '#wrap',timeout: 8000}); //#wrap为刷新的id     $(document).on('pjax:send', function() {     $(".loading").css("display", "block");     //预加载函数可写在这里 }); $(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无法定位的问题     //重新定位容器内容的函数写在这里 }); </script>

关键词标签: 加载 标签 网页

声明: 本文由我的SEOUC技术文章主页发布于:2023-05-26 ,文章织梦DedeCMS利用Pjax实现网页无刷新加载的详细教程主要讲述加载,标签,网页网站建设源码以及服务器配置搭建相关技术文章。转载请保留链接: https://www.seouc.com/article/web_9419.html

我的IDC 网站建设技术SEOUC.COM
专注网站建设,SEO优化,小程序设计制作搭建开发定制网站等,数千家网站定制开发案例,网站推广技术服务。
  • 5000+合作客服
  • 8年从业经验
  • 150+覆盖行业
  • 最新热门源码技术文章