看到 推酷 的博客效果挺好的,然后就找到了 这盘文章 : http://www.tuicool.com/articles/fMrEVv (使用Pjax优化你的网站);
这个网站是使用了 pjax 和 NProgress.js 这2个前端插件的;
下面先说 pjax:
https://github.com/defunkt/jquery-pjax 为pjax的github项目地址
在github的项目地址里有关于pjax的详细说明和使用方法,这里不再赘述,本文主要是使用中的一些代码记录和使用心得,方便以后查阅快速上手使用。
看下下述小段代码:
- <div class="body">
- <?php $action_name = $Think.ACTION_NAME; ?>
-
-
- <?php if ($action_name == 'news'): ?>
- <include file="Brand:header_news" />
- <?php elseif ($action_name == 'forum'): ?>
- <include file="Brand:header_forum" />
- <?php endif; ?>
-
-
- <div class="cb"></div>
- <div class="brand-news-nav pjax">
- <ul class="clearfix">
- <li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li>
- <volist name="cat_list" id="vo" key="i">
- <li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="{:U("Brand/$action_name",array('cat'=>$vo['id']))}">{$vo.name}</a></li>
- </volist>
- </ul>
- </div>
-
- <script type="text/javascript">
- $(function(){
- $(document).pjax('.pjax a', '#pjax-container',{
- type:'post',
- scrollTo:false,
- });
- $(document).on('pjax:click', function() {
- enable_loading = false;
- })
- $(document).on('pjax:send', function(){
- var str = "<p class='tc mt-10'>加载中...</p>";
- $('#pjax-container').html(str);
- })
-
- //最后一个右侧加边框
- $(".brand-news-nav ul li").last().children('a').addClass('last');
- $(".brand-news-nav ul li").click(function(){
- $(this).addClass('selected').siblings().removeClass('selected');
- })
- })
- </script>
-
-
- <div class="wrap clearfix">
- <div class="brand-news-list fl" id="pjax-container">
- <include file="Brand:article_pjax" />
- </div>
- <div class="brand-news-right fr pb-20">
- <a href="{$adv3[0]['url']}"><img class="scrollLoading" data-url="{$adv3[0]['images']|showImagePath}" src="__PUBLIC__/index/images/loading270x160.gif" width="260" height="150"></a>
- <p class="title mt-10">法律支持</p>
- <ul class="bgc-fff">
- <volist name="law_list" id="vo">
- <a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a>
- </volist>
- </ul>
- <button class="btn btn-right mt-10 btn-consult">免费咨询</button>
- <script type="text/javascript">
- $(function(){
- //最后一个需要添加一个last的样式
- $(".brand-news-right li:last").addClass('last');
- })
- </script>
- </div>
- </div>
- </div>
服务器端处理
- if(is_pjax()){
- $this->display('article_pjax');
- }else{
- $this->display('article');
- }
-
- function is_pjax(){
- return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];
- }
其中的主要思想就是当 .pjax a 进行点击的时候,将#pjax-container的内容替换为请求后的内容。在后端处理时需要判断是否是pjax请求,如果是需要进行局部渲染,如果不是进行全部渲染。
因为pjax用到了HTML5技术,如果浏览器不支持Html5那么网站会正常进行跳转式的加载,如果支持那么只是进行局部渲染(但是浏览器地址栏中的url会正常跟着a链接进行变动)。
注意上述的js代码中在配置pjax时有个参数scrollTo:false,加上此参数表示点击连接后网页的scrollBar不会变动,如没有此参数,每次点击时浏览视窗会自动跳转到网页顶部
然后接下来是 NProgress :
NProgress.js 的下载地址
https://github.com/rstacruz/nprogress
NProgress 需要Jquery 版本在 1.8以上;
引入Nprogress
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
当Pjax在使用的时候,可用如下代码:
$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end', function() { NProgress.done(); });
其他具体用法 可参照
http://blog.csdn.net/u012369749/article/details/62422113 (
NProgress.js全站进度条插件 中文API
)