我一定写了一个假的技术博客
当前位置: 首页>> 技术宅 >> 正文

极易移植的万能WordPress全站ajax代码

2015年02月26日 6 条评论 ... 技术宅

全站 ajax 加载网站的用户体验是很奇妙的,全程浏览网站期间看不到任何浏览器刷新的迹象,点击网站上的链接,如果网站的速度可以的话,会给人一种瞬间加载的顺滑感觉,同时不失有高大上的感觉。

现在我看到很多 WordPress 网站已经部署上了全站 ajax 加载代码,效果也不错,所以我也在 lipop 主题中设置了全站局部刷新的 ajax 代码。全站 ajax 看似技术复杂,但是实际上操作起来非常简易,原因是已经有大神写好了相关的函数,任何开发者只要稍微修改一下参数,就可以轻松改造自己的网站。

全站 ajax 代码的来源是从 WordPress 插件中提取出来的,作者是英国的卢克和威廉姆斯。这款代码适用范围非常广,不仅 WordPress 网站可以使用,只要结构统一完整的网站都可以使用,只需要简单的几部就可以改造完成。

ajax 代码部分

  1. var ajaxhome='';
  2. var ajaxcontent = 'content';
  3. var ajaxsearch_class = 'searchform';
  4. var ajaxignore_string = new String('#, /wp-, .pdf, .zip, .rar, /goto');
  5. var ajaxignore = ajaxignore_string.split(', ');
  6. var ajaxloading_code = 'loading';
  7. var ajaxloading_error_code = 'error';
  8. var ajaxreloadDocumentReady = false;
  9. var ajaxtrack_analytics = false
  10. var ajaxscroll_top = true
  11. var ajaxisLoad = false;
  12. var ajaxstarted = false;
  13. var ajaxsearchPath = null;
  14. var ajaxua = jQuery.browser;
  15. jQuery(document).ready(function() {
  16.     ajaxloadPageInit("");
  17. });
  18. window.onpopstate = function(event) {
  19.     if (ajaxstarted === true && ajaxcheck_ignore(document.location.toString()) == true) {
  20.         ajaxloadPage(document.location.toString(),1);
  21.     }
  22. };
  23. function ajaxloadPageInit(scope){
  24.     jQuery(scope + "a").click(function(event){
  25.         if (this.href.indexOf(ajaxhome) >= 0 && ajaxcheck_ignore(this.href) == true){
  26.             event.preventDefault();
  27.             this.blur();
  28.             var caption = this.title || this.name || "";
  29.             var group = this.rel || false;
  30.             try {
  31.                 ajaxclick_code(this);
  32.             } catch(err) {
  33.             }
  34.             ajaxloadPage(this.href);
  35.         }
  36.     });
  37.     jQuery('.' + ajaxsearch_class).each(function(index) {
  38.         if (jQuery(this).attr("action")) {
  39.             ajaxsearchPath = jQuery(this).attr("action");;
  40.             jQuery(this).submit(function() {
  41.                 submitSearch(jQuery(this).serialize());
  42.                 return false;
  43.             });
  44.         }
  45.     });
  46.     if (jQuery('.' + ajaxsearch_class).attr("action")) {} else {
  47.     }
  48. }
  49. function ajaxloadPage(url, push, getData){
  50.     if (!ajaxisLoad){
  51.         if (ajaxscroll_top == true) {
  52.             jQuery('html,body').animate({scrollTop: 0}, 1500);
  53.         }
  54.         ajaxisLoad = true;
  55.         ajaxstarted = true;
  56.         nohttp = url.replace("http://","").replace("https://","");
  57.         firstsla = nohttp.indexOf("/");
  58.         pathpos = url.indexOf(nohttp);
  59.         path = url.substring(pathpos + firstsla);
  60.         if (push != 1) {
  61.             if (typeof window.history.pushState == "function") {
  62.                 var stateObj = { foo: 1000 + Math.random()*1001 };
  63.                 history.pushState(stateObj, "ajax page loaded...", path);
  64.             } else {
  65.             }
  66.         }
  67.         if (!jQuery('#' + ajaxcontent)) {
  68.         }
  69.         jQuery('#' + ajaxcontent).append(ajaxloading_code);
  70.         jQuery('#' + ajaxcontent).fadeTo("slow", 0.4,function() {
  71.             jQuery('#' + ajaxcontent).fadeIn("slow", function() {
  72.                 jQuery.ajax({
  73.                     type: "GET",
  74.                     url: url,
  75.                     data: getData,
  76.                     cache: false,
  77.                     dataType: "html",
  78.                     success: function(data) {
  79.                         ajaxisLoad = false;
  80.                         datax = data.split('<title>');
  81.                         titlesx = data.split('</title>');
  82.                         if (datax.length == 2 || titlesx.length == 2) {
  83.                             data = data.split('<title>')[1];
  84.                             titles = data.split('</title>')[0];
  85.                             jQuery(document).attr('title', (jQuery("<div/>").html(titles).text()));
  86.                         } else {
  87.                         }
  88.                         if (ajaxtrack_analytics == true) {
  89.                             if(typeof _gaq != "undefined") {
  90.                                 if (typeof getData == "undefined") {
  91.                                     getData = "";
  92.                                 } else {
  93.                                     getData = "?" + getData;
  94.                                 }
  95.                                 _gaq.push(['_trackPageview', path + getData]);
  96.                             }
  97.                         }
  98.                         data = data.split('id="' + ajaxcontent + '"')[1];
  99.                         data = data.substring(data.indexOf('>') + 1);
  100.                         var depth = 1;
  101.                         var output = '';
  102.                         while(depth > 0) {
  103.                             temp = data.split('</div>')[0];
  104.                             i = 0;
  105.                             pos = temp.indexOf("<div");
  106.                             while (pos != -1) {
  107.                                 i++;
  108.                                 pos = temp.indexOf("<div", pos + 1);
  109.                             }
  110.                             depth=depth+i-1;
  111.                             output=output+data.split('</div>')[0] + '</div>';
  112.                             data = data.substring(data.indexOf('</div>') + 6);
  113.                         }
  114.                         document.getElementById(ajaxcontent).innerHTML = output;
  115.                         jQuery('#' + ajaxcontent).css("position", "absolute");
  116.                         jQuery('#' + ajaxcontent).css("left", "20000px");
  117.                         jQuery('#' + ajaxcontent).show();
  118.                         ajaxloadPageInit("#" + ajaxcontent + " ");
  119.                         if (ajaxreloadDocumentReady == true) {
  120.                             jQuery(document).trigger("ready");
  121.                         }
  122.                         try {
  123.                             ajaxreload_code();
  124.                         } catch(err) {
  125.                         }
  126.                         jQuery('#' + ajaxcontent).hide();
  127.                         jQuery('#' + ajaxcontent).css("position", "");
  128.                         jQuery('#' + ajaxcontent).css("left", "");
  129.                         jQuery('#' + ajaxcontent).fadeTo("slow", 1, function() {});
  130.                     },
  131.                     error: function(jqXHR, textStatus, errorThrown) {
  132.                         ajaxisLoad = false;
  133.                         document.title = "Error loading requested page!";
  134.                         document.getElementById(ajaxcontent).innerHTML = ajaxloading_error_code;
  135.                     }
  136.                 });
  137.             });
  138.         });
  139.     }
  140. }
  141. function submitSearch(param){
  142.     if (!ajaxisLoad){
  143.         ajaxloadPage(ajaxsearchPath, 0, param);
  144.     }
  145. }
  146. function ajaxcheck_ignore(url) {
  147.     for (var i in ajaxignore) {
  148.         if (url.indexOf(ajaxignore[i]) >= 0) {
  149.             return false;
  150.         }
  151.     }
  152.     return true;
  153. }
  154. function ajaxreload_code() {
  155.     //add code here   
  156. }
  157. function ajaxclick_code(thiss) {
  158.     jQuery('ul.nav li').each(function() {
  159.         jQuery(this).removeClass('current-menu-item');
  160.     });
  161.     jQuery(thiss).parents('li').addClass('current-menu-item');
  162. }

代码部分需要根据自己的实际修改一小部分:

1、第一行 ajaxhome 填写网站的访问网址;

2、第二行 ajaxcontent 填写网站文章的容器id名称,即异步加载的部分;

3、第三行 ajaxsearch_class 填写网站搜索框的容器名称,一般都是“searchform”;

4、第四行 ajaxignore_string 是忽略使用ajax加载的链接,比如说feed源等等;

5、第六行 ajaxloading_code 加载时显示的内容,可以设定动画;

6、第七行 ajaxloading_error_code 加载失败时显示的内容,可以设定动画。

 

只要按照上述要求修改好代码,单独存放为 JS 文件并且引入网页之中,效果立竿见影。有木有很神奇的感觉。

ajax异步加载影响其他jQuery特效

部署上 ajax 异步加载代码后,会出现一个问题,首次打开网站后,jQuery 动画都会正常运行,但是点击网页执行了 ajax 异步加载之后,所有的动画都会失效。这是因为进行异步加载后 jQuery 代码无法获取元素,特效自然消失,为解决这个问题,还需要对 jQuery 代码进行改造。

解决方式是使用 live() 事件,live() 事件的用法如下:

  1. $(selector).live(event,data,function)

event 用来替换 click()hover() 等动作;data 可选,是参数;function 是需要执行的动作。

举个例子,一个 click() 事件改写为 live() 事件,原本代码是这样:

  1. $(".menu-item").click(function(){$(".topmenu").fadeOut(500)});

修改之后:

  1. $(".menu-item").live("click",function(){$(".topmenu").fadeOut(500)});

可以感受一下。

jQuery加载动画精选

加载动画是纯 CSS3 动画,自然是不支持低版本浏览器了。动画分两个部分:HTML 代码和 CSS 代码,HTML代码放置在ajax文件中的 ajaxloading_code 之后,请注意,JavaScript 中禁止一句代码回车分行,所以需要把HTML 代码整理后存放。

效果一

HTML代码

  1. <div class="spinner">
  2.   <div class="rect1"></div>
  3.   <div class="rect2"></div>
  4.   <div class="rect3"></div>
  5.   <div class="rect4"></div>
  6.   <div class="rect5"></div>
  7. </div>

CSS代码

  1. .spinner {
  2.   margin: 100px;
  3.   width: 50px;
  4.   height: 60px;
  5.   text-align: center;
  6.   font-size: 10px;
  7. }
  8. .spinner > div {
  9.   background-color: #67CF22;
  10.   height: 100%;
  11.   width: 6px;
  12.   display: inline-block;
  13.   -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  14.   animation: stretchdelay 1.2s infinite ease-in-out;
  15. }
  16. .spinner .rect2 {
  17.   -webkit-animation-delay: -1.1s;
  18.   animation-delay: -1.1s;
  19. }
  20. .spinner .rect3 {
  21.   -webkit-animation-delay: -1.0s;
  22.   animation-delay: -1.0s;
  23. }
  24. .spinner .rect4 {
  25.   -webkit-animation-delay: -0.9s;
  26.   animation-delay: -0.9s;
  27. }
  28. .spinner .rect5 {
  29.   -webkit-animation-delay: -0.8s;
  30.   animation-delay: -0.8s;
  31. }
  32. @-webkit-keyframes stretchdelay {
  33.   0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  34.   20% { -webkit-transform: scaleY(1.0) }
  35. }
  36. @keyframes stretchdelay {
  37.   0%, 40%, 100% {
  38.     transform: scaleY(0.4);
  39.     -webkit-transform: scaleY(0.4);
  40.   }  20% {
  41.     transform: scaleY(1.0);
  42.     -webkit-transform: scaleY(1.0);
  43.   }
  44. }

效果演示

效果1

 

效果二

HTML代码

  1. <div class="spinner"></div>

CSS代码

  1. .spinner {
  2.   width: 60px;
  3.   height: 60px;
  4.   background-color: #67CF22;
  5.   margin: 100px;
  6.   -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  7.   animation: rotateplane 1.2s infinite ease-in-out;
  8. }
  9. @-webkit-keyframes rotateplane {
  10.   0% { -webkit-transform: perspective(120px) }
  11.   50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  12.   100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
  13. }
  14. @keyframes rotateplane {
  15.   0% {
  16.     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  17.     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  18.   } 50% {
  19.     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  20.     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  21.   } 100% {
  22.     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  23.     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  24.   }
  25. }

效果演示

效果2

动态效果为正方片旋转。

 

效果三

HTML代码

  1. <div class="spinner">
  2.   <div class="bounce1"></div>
  3.   <div class="bounce2"></div>
  4.   <div class="bounce3"></div>
  5. </div>

CSS 代码

  1. .spinner {
  2.   margin: 100px;
  3.   width: 150px;
  4.   text-align: center;
  5. }
  6. .spinner > div {
  7.   width: 30px;
  8.   height: 30px;
  9.   background-color: #67CF22;
  10.   border-radius: 100%;
  11.   display: inline-block;
  12.   -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  13.   animation: bouncedelay 1.4s infinite ease-in-out;
  14.   -webkit-animation-fill-mode: both;
  15.   animation-fill-mode: both;
  16. }
  17. .spinner .bounce1 {
  18.   -webkit-animation-delay: -0.32s;
  19.   animation-delay: -0.32s;
  20. }
  21. .spinner .bounce2 {
  22.   -webkit-animation-delay: -0.16s;
  23.   animation-delay: -0.16s;
  24. }
  25. @-webkit-keyframes bouncedelay {
  26.   0%, 80%, 100% { -webkit-transform: scale(0.0) }
  27.   40% { -webkit-transform: scale(1.0) }
  28. }
  29. @keyframes bouncedelay {
  30.   0%, 80%, 100% {
  31.     transform: scale(0.0);
  32.     -webkit-transform: scale(0.0);
  33.   } 40% {
  34.     transform: scale(1.0);
  35.     -webkit-transform: scale(1.0);
  36.   }
  37. }

效果演示

效果3

动画效果为三个圆点依次收缩放大

ajax 局部加载对 SEO 的猜想

ajax 加载网站的方式可能会让一部分习惯浏览常规网站的人感觉不适应,人都如此,那么搜索引擎蜘蛛呢?对于 ajax 是否对 SEO 有消极影响的问题,很多人都有自己的见解。在我认为 ajax 对网站 SEO 没有任何影响,因为根据蜘蛛抓取网页的思路来讲,蜘蛛进入网站后抓取内容吗,然后探索其他链接地址,进行下一页的抓取。所以只要保证了网页链接没有问题,网站内容有保证,ajax 跟搜索引擎蜘蛛没有多少关系,更别提是否有深仇大恨那么夸张了。全局 ajax 处理过的网站,就像是附着在网站上的特效工具,可有可无,跟网站的内容是剥离明晰的,蜘蛛更加关心的是 HTML 网页中的内容,所以做好网站内容和基本的 SEO 优化即可。

版权保护: 本文由 唐野 原创,转载请保留链接: http://www.yelook.com/1124.html

立即打赏
  • 支付宝打赏

  • 微信打赏

  • 如果这篇文章对您有帮助,欢迎点击上方按钮给我打赏。

    6 条吐槽

    Loading...
    1. 灰常记忆

      有插件就好了

      2015-03-1 [回复]
      • 有野出没

        有插件的,因为这些代码都是从插件里面拆下来的,但是插件拖累速度啊。

        2015-03-2 [回复]
    2. 冰龙

      Jquery把这些问题都简化得不再难以入门了…现在无论是ajax或者是pjax都很容易实现了。

      2015-03-10 [回复]
    3. 之行

      大叔为毛输入框信息在输入框下面 ´▽` 有点不习惯,输错了都
      没弄好 ´▽` 感觉好复杂,话说你说这个是从插件里提去的,那有插件么

      2015-03-25 [回复]
      • 有野出没

        大叔。。。咱还很年轻啊。介于你这么说咱家,只好给你个反人类的输入框玩玩了。插件我没接触过,强迫症不需要插件。

        2015-03-26 [回复]
    4. Accn

      感谢

      2015-03-26 [回复]

    发布评论