怎么在html中加入pjax,网页添加Pjax代码实现无刷新加载
Pjax是什么?
在网页上点击链接,只会更新网页内容和更改地址栏上的网址,如果网页有音乐播放器,点击链接后,音乐播放器也没有影响,仍在继续播放音乐,与将整个网页加载相比,这种浏览网页体验要好得多,还能节省服务器带宽和成本。
添加步骤
一、下载JS文件(本站下载),上传到网站目录内。
二、在网页的
后面添加代码。
三、在网页中找到需要Pjax无刷新的地方,在前面添加
。比如,在顶部导航栏的下方和底部导航栏的上方。
四、在前面添加以下代码。
$(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无法定位的问题
//重新定位容器内容的函数写在这里});
五、加载动画,在CSS文件添加以下代码。(可选添加,如果你使用的是虚拟主机或者低配服务器,不建议添加动画。).loading{display:none}
.loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:999999;background-color:rgba(250,250,250,.9)}
.loading img{width: 280px;height:210px;position: relative;top: 45%;left: 50%;margin-left:-140px;margin-top: -105px;}
#loader{display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #ff5a5a; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;}
#loader:before{content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #5af33f; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite;}
#loader:after{content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #6dc9ff; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}
@-webkit-keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}
@keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}
六、在
怎么在html中加入pjax,网页添加Pjax代码实现无刷新加载相关推荐
- emlog通过pjax实现无刷新加载网页--完美解决cnzz统计和javascript失效问题
想要更详细了解pjax,需要查看官网 或者看本站文章:jQuery.pjax.js:使用AJAX和pushState无刷新加载网页(官网教程中文翻译) 效果看本站,音乐无刷新播放,代码高亮和复制js加 ...
- 使用 pjax 实现网站无刷新加载
之前也没有研究过pjax,但是没事走访别人博客时看到不少经过pjax优化的网站,响应速度很快,今天看到玖梦博客的一篇<一行代码实现全站pjax无刷新加载>测试后发发现效果确实不错,故发文记 ...
- 一行代码实现全站pjax无刷新加载
之前也没有研究过pjax,但是没事走访别人博客时看到不少经过pjax的网站,响应速度很快,今天一篇<一行代码实现全站pjax无刷新加载>测试后发发现效果确实不错,但是由于我是老的媒体范板子 ...
- php pjax数据返回,如何将Pjax整合进网站,实现全站无刷新加载?
摘要: pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入HTML网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后退 ...
- pjax php demo,Pjax无刷新加载页面基础示例
前言 今天浏览了一些精美的前端页面,然后看见有些页面运用了Pjax,让整个页面加载很快.之前很久就想去看看Pjax是怎么实现的了,今天就去了解了一下,然后懂得了他的运行原理.下面就来分享一下. 运行原 ...
- pjax php,php整合pjax(pushstate+ajax)实现无刷新页面
PJAX效果 通过url可以跟踪ajax的动态加载内容.这种技术尤其在two step view布局的视图中有很大的好处.无刷新加载页面,意味着响应速度和用户体验得到了极大的提升,在静态脚本和通用模块 ...
- HTML中如何为网页添加背景音乐
许多小伙伴在问HTML中如何为网页添加背景音乐,其实很简单,先准备好你的mp3音乐文件,这里我随便准备一个yinyue.mp3作为示例,那么怎么嵌入到网页呢?敲黑板了,注意,这是关键所在,参考以下关键 ...
- 动态加载html 添加样式表,使页面动态加载不同CSS样式表,从而实现不同风格模板的方法...
我们在制作网页时,有时会制作多种风格模板,而想把这些模板都用起来,而又不知道方法,通过以下两种方法,你就可以实现相同网站不同CSS模板的方法. ASP.Net中利用CSS实现多界面两种方法. 方法一: ...
- 在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据
在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据 如今,最流行的拍照设备智能手机可以捕获高达4K UHD的图像(3840×2160图像),原始数据超过25 MB.即使 ...
- 如何在App中实现朋友圈功能之六快速实现下拉加载朋友圈功能——箭扣科技Arrownock
如何在App中实现朋友圈功能 之六 快速实现下拉加载朋友圈功能 实现逻辑: 根据上次下拉刷新的时间从数据库加载出limit(比如10)条post,判断总数据条数: a. 如果总数据大于limit条,清 ...
最新文章
- CyberRT使用笔记
- 微信内置浏览器无法清除缓存问题
- Python第十课 网络管理
- xamarin android pdf,Xamarin.Android - 下载pdf和视频到应用空间并打开
- python数据库self函数_Python常用功能函数系列总结(四)之数据库操作
- SQL实战篇:SQL解决连续X天的问题
- Mysql启动自己主动设置max_connections为其它值
- SVG矢量绘图 path路径详解(基本画法)
- oracle批量插入并且返回自增主键_mybatis + (oracle)实现主键自增 + 插入数据并返回主键...
- SpringBoot整合Shiro实现权限管理,经典实战教程
- Dubbo_异常_Service启动时默认将方法注册到内网IP
- Visio画图,空间太小,画不下
- PyCharm - Compare With... (文件比较)
- 乒乓球技术要领总结(保持更新)
- OPPO年薪百万offer经历分享
- apple API常用英语名词
- Android开发—简单的图片浏览器
- kotlin开发Android入门篇八Kotlin开发Android的基本使用
- idea常用护眼色的RGB值调整
- 第十七届全国大学生智能车竞赛线上比赛直播链接