全站ajax
这
里是第一次说起Ajax,其实刚开始我也不太懂,更没有仔细百度,目前本站的主题就是全站ajax加载的。
据我所知,目前采用这个技术的主题还非常少见。除了由Cue开发的wpgo、胖子马的Q9 还有soz之外 剩下有两三个叫不上名字的主题。
除此之外,也一直没有很通俗的技术性文章告诉我们该怎么做,深入进去才知道其实没那么简单。初步实现ajax其实还比较容易,但要对某些效果进行后续处理就很难了。 比如:当用户浏览完一篇文章需要用浏览器进行后退操作时怎么办?此时只有地址栏的url会改变,页面还是原封不动的。
局部ajax
局部ajax其实大多数主题都已经具备了,就是我们常见的ajax评论提交,百度一下就会有很多教程。
在这里也不赘述了,而且我也没有研究过。(直接折腾全站ajax?是不是有些不切实际……)
在这里也不赘述了,而且我也没有研究过。(直接折腾全站ajax?是不是有些不切实际……)
最近制作主题一直在这个问题上滞留,其实我可以做一个很简单的主题,对于只求速度性能的人来说已经足够了。下面是一段很简单的js代码,足够实现全站ajax加载,但是没法处理上面所说的细节问题。还有一个前提,必须加载jQuery库。
- //ajax
- $(".navbar a,.entry-title a, h3 a,.col-sm-4 a,.post-thumb a").live("click",
- function() {
- window.history.pushState({
- time: new Date().getTime()
- },
- "", $(this).attr("href"));
- $("#main").empty().append('这里放置加载动画的div');
- $('body,html').animate({
- scrollTop: 0
- },
- 100);
- $.ajax({
- type: "POST",
- url: $(this).attr("href"),
- success: function(data) {
- result = $(data).find("#main");
- $("#main").remove();
- $("#sidebar").before(result);
- document.title = $(data).filter("title").text();
- }
- });
- return false
- });
以上代码来自卢哥主题,百度一下应该很容易找到。
下面是按我个人理解进行注释后的代码:
- //ajax
- $("这里加入你所要触发点击事件的a标签").live("click",
- function() {
- window.history.pushState({
- time: new Date().getTime()
- },
- "", $(this).attr("href"));
- $("被加载的主体id或者类,比如文章主体").empty().append('这里放置加载动画的div');
- //点击事件后返回顶部
- $('body,html').animate({
- scrollTop: 0
- },
- 100);
- //ajax核心代码
- $.ajax({
- type: "POST",
- url: $(this).attr("href"),
- success: function(data) {
- result = $(data).find("被加载的主体id或者类,比如文章主体");
- $("被加载的主体id或者类,比如文章主体").remove();
- $("不加载部分的id或类,比如侧栏").before(result);
- document.title = $(data).filter("title").text();
- }
- });
- return false
- });
最后是新主题使用的ajax,经过改良。不过还有不少细节问题没有处理,算是初级版本代码如下:
//inlojv-ajax $("这里加入你所要触发点击事件的a标签").live("click", function() { window.history.pushState({ time: new Date().getTime() }, "", $(this).attr("href")); $('<div id="inlojv_ajax_loading_frame"></div><div title="页面加载中..." id="inlojv_ajax_loading"><div></div></div>').appendTo('body'); $.ajax({ type: "POST", url: $(this).attr("href"), success: function(data) { result = $(data).find("被刷新的主体id或者类,比如文章主体"); $("要被替换的主体id或类").remove(); $("不被请求的主体id或者类,比如右侧栏").before(result); document.title = $(data).filter("title").text(); }, //超时控制 timeout: 15000, error: function() { $('#inlojv_ajax_loading_frame,#inlojv_ajax_loading').remove(); location.href = url; //页面错误时跳转到请求的页面 }, //完成后移除加载画面 complete: function() { $('#inlojv_ajax_loading_frame,#inlojv_ajax_loading').remove(); } }); //点击后返回顶部,1000是滚动速度,越大则越慢 $('body,html').animate({scrollTop: 0},1000); return false });
然后是CSS:
/*ajax加载动画*/ #inlojv_ajax_loading_frame{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;background-color:#428bca;opacity:.2;filter:alpha(opacity=20)} #inlojv_ajax_loading{left:0;top:0;display:table-cell;z-index:9999999;position:fixed;width:100%;height:100%} #inlojv_ajax_loading div{left:49%;top:49%;position:absolute;width:40px;height:40px;background:url('images/inlojv_loading.gif') 50% 50% no-repeat}
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/3602.html