异步加载wordpress最新评论

昨天回家了,忙到大半夜才歇脚,就没写了,评论也大多没回复,今天堆一起回估计又要超标了.
本文原理是利用Google AJAX APIs实现RSS的异步加载,也可以广泛应用在其他地方,例如:我们都知道wordpress默认抓取RSS的函数fetch_feed()比较影响速度,所以如果你的网站有抓取rss,就可以采用此方法,这样不会影响后面元素的正常加载.
方法很简单,把如下代码扔到你要加载最新评论的地方即可,比如边栏

<div id="feedControl">loading...</div>
<!--当ajax抓取到feed之后,会将此容器覆盖,loading可改成你想要的加载效果-->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"></script>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: '',
url: 'http://你的网址/comments/feed'
}];
var options = {
numResults : 10, //抓取的条数 
displayTime : 2000, //上方单条摘要展示的时间,单位毫秒
fadeOutTime : 1000, //轮换展示的间隔,单位毫秒
scrollOnFadeOut : true,//切换时是否使用渐隐效果
pauseOnHover : true, //当鼠标移过时是否显示其摘要
stacked : false, //是否同时展示多条摘要
horizontal : false, //true则一次只展示一条,false则以列表形式展示
title : "最新评论" //标题,可不写,为了与主题搭配,下面的css中已经将其隐藏
}
new GFdynamicFeedControl(feeds, 'feedControl', options);
}
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<!--CSS开始-->
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
.gfg-root { border:0px}
.gfg-title,.gfg-subtitle{ display:none}
.gfg-listentry {line-height: 2.5em}
.gfg-listentry a{text-decoration:none;color:#444}
.gfg-listentry-odd {background:none;}
.gfg-listentry-highlight {background:#ddd}
</style>

这段代码同样适用于其他任何你想抓取RSS的地方,最终效果如图,

异步加载wordpress最新评论

54 Comments

Name *

E-mail *

Website

  1. Mikeyzm

    Mark一下先! :meme:

  2. Allan

    学习了。

  3. 爱软

    来看看博主

  4. Tokin

    需要深入研究研究。。。一眼看不懂,。。 :fue:

    • 小蝴蝶

      @Tokin 这代码直接cp就行了 头像换了?

      • Tokin

        @小蝴蝶 恩,换了个头像,,,帅哥哦。。
        我想研究下头像异步加载,所以需要仔细看看 :nono:

        • 小蝴蝶

          @Tokin 这个是用谷歌的feed ajax api,头像的异步加载和这个不一样,你可以搜一下头像延迟加载

          • Tokin

            @小蝴蝶 异步加载用了,但是。。。我的读者墙头像都在第一屏,延迟加载无效果。。。 :ku:

          • Tokin

            @小蝴蝶 有什么妙招么。。。 :er:

            • 小蝴蝶

              @Tokin 给你个路子,看那个异步加载截图的js,用js来追写div内容,以及用window.onload来控制让它等网页所有元素加载后再执行

  5. xsinger

    网站有变化,大家发现了没?

    • Tokin

      @xsinger 说实话。。。没有发现。。。 :fue:

      • 小蝴蝶

        @Tokin 其实他说的就是图床

  6. kn007

    学习!

  7. kn007

    看了蛮多你的文章,还没看完。。也回了不少,初步感觉,博客响应速度快

    • 小蝴蝶

      @kn007 被残暴的刷屏

  8. kn007

    就上面那条评论,看了,你位于大发的保罗vps上。。。