原野日和

    •
    • 首页 / 技术 / 正文

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

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

    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. }
    9. .spinner > div {
    10.   background-color: #67CF22;
    11.   height: 100%;
    12.   width: 6px;
    13.   display: inline-block;
    15.   -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    16.   animation: stretchdelay 1.2s infinite ease-in-out;
    17. }
    19. .spinner .rect2 {
    20.   -webkit-animation-delay: -1.1s;
    21.   animation-delay: -1.1s;
    22. }
    24. .spinner .rect3 {
    25.   -webkit-animation-delay: -1.0s;
    26.   animation-delay: -1.0s;
    27. }
    29. .spinner .rect4 {
    30.   -webkit-animation-delay: -0.9s;
    31.   animation-delay: -0.9s;
    32. }
    34. .spinner .rect5 {
    35.   -webkit-animation-delay: -0.8s;
    36.   animation-delay: -0.8s;
    37. }
    39. @-webkit-keyframes stretchdelay {
    40.   0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
    41.   20% { -webkit-transform: scaleY(1.0) }
    42. }
    44. @keyframes stretchdelay {
    45.   0%, 40%, 100% {
    46.     transform: scaleY(0.4);
    47.     -webkit-transform: scaleY(0.4);
    48.   }  20% {
    49.     transform: scaleY(1.0);
    50.     -webkit-transform: scaleY(1.0);
    51.   }
    52. }

    效果演示

    效果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. }
    10. @-webkit-keyframes rotateplane {
    11.   0% { -webkit-transform: perspective(120px) }
    12.   50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    13.   100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
    14. }
    16. @keyframes rotateplane {
    17.   0% {
    18.     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    19.     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    20.   } 50% {
    21.     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    22.     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    23.   } 100% {
    24.     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    25.     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    26.   }
    27. }

    效果演示

    效果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. }
    7. .spinner > div {
    8.   width: 30px;
    9.   height: 30px;
    10.   background-color: #67CF22;
    12.   border-radius: 100%;
    13.   display: inline-block;
    14.   -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    15.   animation: bouncedelay 1.4s infinite ease-in-out;
    16.   -webkit-animation-fill-mode: both;
    17.   animation-fill-mode: both;
    18. }
    20. .spinner .bounce1 {
    21.   -webkit-animation-delay: -0.32s;
    22.   animation-delay: -0.32s;
    23. }
    25. .spinner .bounce2 {
    26.   -webkit-animation-delay: -0.16s;
    27.   animation-delay: -0.16s;
    28. }
    30. @-webkit-keyframes bouncedelay {
    31.   0%, 80%, 100% { -webkit-transform: scale(0.0) }
    32.   40% { -webkit-transform: scale(1.0) }
    33. }
    35. @keyframes bouncedelay {
    36.   0%, 80%, 100% {
    37.     transform: scale(0.0);
    38.     -webkit-transform: scale(0.0);
    39.   } 40% {
    40.     transform: scale(1.0);
    41.     -webkit-transform: scale(1.0);
    42.   }
    43. }

    效果演示

    效果3

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

    ajax 局部加载对 SEO 的猜想

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

    赏

    感谢你的赏识与认可

    支付宝

    微信支付

    使用手机访问这篇文章

    本文许可协议 © CC BY-NC-SA 4.0 转载请注明来源

    本文链接：https://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 [回复]

    发布评论

    Field Tung

    人类迷惑行为研究员

    最新文章

    热门文章

  • 内容目录

    • © 2012-2024 All rights reserved | Theme by Field Tung | 鲁ICP备2024059186号 | 鲁公网安备37021302001198 | 萌ICP备20241993号

    原野日和（有野出没）Since 2012-03-31 已经运行4579天 | 关于本站 | 隐私协议