织梦DedeCMS利用Pjax实现网页无刷新加载的详细教程
导读:程序开发程序开发很多朋友在找织梦网站实现PJAX的教程,这里淘站网整理了一篇文章来统一解决大家的问题! 加入 Pjax 后,我们的网站可以实现无刷新加载网页,加上一个良好的过度网站优化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