异步加载评论者网站截图

2013年4月3日22:11:45 49 16,540

很久以前,我曾加过一段js代码实现鼠标放在超链接上,显示对方网站的rss最新文章,我用在了友情链接页面,后来由于修改主题,不小心删除了,就再也找不到那段代码了,也记不起来在哪里提供的服务,过了些年,突然发现wordpress的Akismet插件居然能获取评论作者的网站预览缩略图,在wordpress后台,只要把鼠标放在评论作者链接上,就可以显示网站的缩略图!很喜欢这个功能,于是请教小蝴蝶,她三两下就独立出来了,起了个名字:异步获取评论者网站截图,用它,可以实时预览作者网站,还可以知道对方是否更新文章,也算达到了获取评论作者rss最新文章的效果,而且没有rss更新延迟的问题,真正做到实时预览,并且不影响页面加载速度,因为是用jQuery异步加载。

虽然她分享过方法了,有人也在本站问过,于是也收藏一下,如有技术问题,请移步小蝴蝶传送门,下面是实现方法:

先放效果图:

yibujiazaijietu

在你的模板函数中找到获取评论者昵称和url的代码,(不知道是什么的话,就搜索get_comment_author_link找到类似下面的代码)

<?php printf(__('<cite>%s</cite>'), get_comment_author_link()) ?>

改成

<cite><a href="<?php comment_author_url(); ?>" rel="external nofollow" target="_blank" id="url-<?php comment_ID() ?>"><?php comment_author(); ?></a></cite>

然后如果你已经载了jquery库,就把下面的扔到你的js里,

jQuery(document).ready(function () {
jQuery('ol.commentlist li.comment .comment-author .fn a[href ^= "http://"]').each(function () {
var thisTitle = jQuery(this).attr('title');
thisCommentId = jQuery(this).attr('id').split("-");
jQuery(this).attr("id", "author_comment_url_"+ thisCommentId[1]);
});
jQuery('a[id^="author_comment_url"]').mouseover(function () {
var wpcomProtocol = ( 'https:' === location.protocol ) ? 'https://' : 'http://';
// Need to determine size of author column
var thisParentWidth = jQuery(this).parent().width();
// It changes based on if there is a gravatar present
thisParentWidth = (jQuery(this).parent().find('.grav-hijack').length) ? thisParentWidth - 42 + 'px' : thisParentWidth + 'px';
if (jQuery(this).find('.mShot').length == 0 && !jQuery(this).hasClass('akismet_undo_link_removal')) {
var thisId = jQuery(this).attr('id').replace('author_comment_url_', '');
jQuery('.widefat td').css('overflow', 'visible');
jQuery(this).css('position', 'relative');
var thisHref = jQuery.URLEncode(jQuery(this).attr('href'));
jQuery(this).append('<div class="mShot mshot-container" style="left: '+thisParentWidth+'"><div class="mshot-arrow"></div><img src="'+wpcomProtocol+'s0.wp.com/mshots/v1/'+thisHref+'?w=450" width="450" class="mshot-image_'+thisId+'" style="margin: 0;" /></div>');
setTimeout(function () {
jQuery('.mshot-image_'+thisId).attr('src', wpcomProtocol+'s0.wp.com/mshots/v1/'+thisHref+'?w=450&r=2');
}, 6000);
setTimeout(function () {
jQuery('.mshot-image_'+thisId).attr('src', wpcomProtocol+'s0.wp.com/mshots/v1/'+thisHref+'?w=450&r=3');
}, 12000);
} else {
jQuery(this).find('.mShot').css('left', thisParentWidth).show();
}
}).mouseout(function () {
jQuery(this).find('.mShot').hide();
});
});
/** URL encode plugin**/
jQuery.extend({URLEncode:function(c){var o='';var x=0;c=c.toString();var r=/(^[a-zA-Z0-9_.]*)/;
while(x<c.length){var m=r.exec(c.substr(x));
if(m!=null && m.length>1 && m[1]!=''){o+=m[1];x+=m[1].length;
}else{if(c[x]==' ')o+='+';else{var d=c.charCodeAt(x);var h=d.toString(16);
o+='%'+(h.length<2?'0':'')+h.toUpperCase();}x++;}}return o;}
});
// Preload mshot images after everything else has loaded
jQuery(window).load(function() {
var wpcomProtocol = ( 'https:' === location.protocol ) ? 'https://' : 'http://';
jQuery('a[id^="author_comment_url"]').each(function () {
jQuery.get(wpcomProtocol+'s0.wp.com/mshots/v1/'+jQuery.URLEncode(jQuery(this).attr('href'))+'?w=450');
});
});</script>
<!-- google 统计代码 start -->
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16431178-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

到此就ok了,刷新试试吧,异步加载不影响页面加载速度,你也可以在本站下面把鼠标放评论作者网站链接上看看实际效果。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:49   其中:访客  28   博主  21

    • 郑永 Admin
      Google Chrome 25 Android 4.1.2

      沙发!预览请把鼠标放评论作者链接上。

      • 胖妹纸 2
        Firefox 19 Windows XP

        看到了,很炫的效果,我也装上去试试。

        • 小蝴蝶 7
          Google Chrome 26 Windows 7

          沙发

            • 郑永 Admin
              Firefox 20 Windows XP

              哇塞, 什么时候冒出来的。。今天去喝酒了?哈哈。。沙发没了。

              @小蝴蝶

              • 小蝴蝶 7
                Google Chrome 26 Windows 7

                我是故意的 哈哈哈 我永远是沙发

                @郑永

              • 不亦乐乎 4
                Google Chrome 26 Windows XP

                看不到自己的?

                • 619影视 1
                  Firefox 20 Windows 7

                  呵呵,来试试我的可以调用到不!!

                  • 红色石头 1
                    Google Chrome 25 Windows 7

                    技术博客啊,我们是一个ip上的,邻居啊~~~

                      • 郑永 Admin
                        Firefox 20 Windows XP

                        差不多都在香港剧集了~·

                        @红色石头

                      • 林木木 7
                        Google Chrome 27 Windows 7

                        Google的统计代码也加上?

                          • 郑永 Admin
                            Firefox 20 Windows XP

                            嗯,我的后台,呵呵。
                            这个是异步截图。

                            @林木木

                          • zwwooooo 9
                            Firefox 20 Windows 7

                            willin kan 做过,当时好像我和木木帮他测试的,忘了。

                              • 郑永 Admin
                                Google Chrome 25 Android 4.1.2

                                当时没看到,真遗憾啊。

                                @zwwooooo

                              • 沐雨 0
                                Google Chrome 25 Windows 7

                                我是来看评论效果的 :eek:

                                  • 郑永 Admin
                                    Google Chrome 25 Android 4.1.2

                                    欢淫欢淫。

                                    @沐雨

                                  • 小蝴蝶 7
                                    Google Chrome 26 Windows 7

                                    再看看

                                    • 郑永 Admin
                                      Firefox 20 Windows XP

                                      试试

                                      • 张书杨 5
                                        Google Chrome 26 Windows 7

                                        喜欢这个功能,貌似小蝴蝶把自己网站的截图给屏蔽,在自己域名下的截图无须加载,小蝴蝶是这个意思?@小蝴蝶

                                          • 郑永 Admin
                                            Firefox 20 Windows XP

                                            没屏蔽,他压根就没填网站地址。

                                            @张书杨

                                          • 土木坛子 4
                                            Google Chrome 26 GNU/Linux

                                            纯粹属于折腾呀。

                                            • 建筑设计 2
                                              Internet Explorer 9 Windows 7

                                              看你的博客学习了很多

                                              • Louis Han 7
                                                Firefox 20 Windows 7

                                                就像WP后台做的那样 挺不错的

                                                  • 郑永 Admin
                                                    Firefox 20 Windows XP

                                                    嗯 :) 酷啊~

                                                    @Louis Han

                                                  • Zorro 2
                                                    Google Chrome 26 Windows 8

                                                    貌似有些问题,测试博主的这个首页评论里的链接有效,我点第二第三页就无效了,再回到第一页也出不来缩略图了。

                                                      • 郑永 Admin
                                                        Google Chrome 25 Android 4.1.2

                                                        不得不说,你的评测非常仔细,或则也许我刚刚分页不久,把这事给忘了,很遗憾的说,要分页就没办法实现了,因为ajax会把js屏蔽了。

                                                        @Zorro

                                                        • Zorro 2
                                                          Google Chrome 26 Windows 8

                                                          我还特意测试了几遍,看来有的时候就是舍弃一些东西.

                                                          @郑永

                                                          • 郑永 Admin
                                                            Google Chrome 25 Android 4.1.2

                                                            到了鱼和熊掌不能兼得的时候,现在放着完全是耍酷了。汗,已失去实用性,或许有天会把分页去掉。

                                                            @Zorro

                                                          • 爱软 4
                                                            Google Chrome 26 Windows XP

                                                            我咋说呢,原来这个办法 :cool:

                                                              • 郑永 Admin
                                                                Firefox 20 Windows XP

                                                                这个办法酷?

                                                                @爱软

                                                              • 空空裤兜 5
                                                                Google Chrome 26 Windows 7

                                                                这个加载速度比后台的快多了

                                                                  • 郑永 Admin
                                                                    Firefox 20 Windows XP

                                                                    嗯,因为用了wp.com,非wordpress.com,那个被墙。

                                                                    @空空裤兜

                                                                  • 阿邙 2
                                                                    Google Chrome 27 Windows XP

                                                                    原来用过kan大师的。

                                                                      • 郑永 Admin
                                                                        Firefox 20 Windows XP

                                                                        嗯,现在用小蝴蝶大师的。

                                                                        @阿邙

                                                                      • 仰肖 1
                                                                        Google Chrome 26 Windows XP

                                                                        这个功能不错。

                                                                          • 郑永 Admin
                                                                            Firefox 20 Windows XP

                                                                            可以预览你的页面。

                                                                            @仰肖

                                                                          • 3qsami 0
                                                                            Google Chrome 26 Windows XP

                                                                            比较有意思的是, s0.wordpress.com 毫无疑问访问不了,但 s0.wp.com 却是间歇性的,加上“/mshots/v1/”之后更是有很大概率直接被切断连接。如果要换成 https 的网站(“https://s-origin.wordpress.com/”或“https://s.wordpress.com”),请问应该如何写语句?

                                                                              • 郑永 Admin
                                                                                Firefox 20 Windows XP

                                                                                小蝴蝶那里答复你了, 哈哈。

                                                                                @3qsami

                                                                              • 从良未遂 2
                                                                                Firefox 20 Windows 7

                                                                                这个功能不错,去折腾一下

                                                                                • 从良未遂 2
                                                                                  Firefox 20 Windows 7

                                                                                  晕,没找到<?php printf(__('%s‘), get_comment_author_link()) ?>啊

                                                                                  • A.yi 2
                                                                                    Firefox 24 Windows 7

                                                                                    不错不错

                                                                                    • 有点蓝 4
                                                                                      Maxthon 4 Windows 7

                                                                                      之前一直用小墙,后来发现有一部分挡不住,最近就用了Akismet,也发现它有站外缩略图的功能了,但是我这边显示出来的缩略图只有一个框框,里边的图片是个大叉号……

                                                                                      • 神经大爆炸 4
                                                                                        QQbrowser 7 Windows 7

                                                                                        后台 装了Akismet插件 但是 鼠标放到评论者链接处显示不出开截图 就显示一个X

                                                                                          • 郑永 Admin
                                                                                            Wordpress App 2 Android 2.4.5

                                                                                            被墙了,正常,我的是用另一个服务器。

                                                                                            @神经大爆炸

                                                                                          • 神经大爆炸 4
                                                                                            QQbrowser 7 Windows 7

                                                                                            测试几次  没的效果!

                                                                                            • 神经大爆炸 4
                                                                                              QQbrowser 7 Windows 7

                                                                                              下午看小蝴蝶 的 受到启发了 一改 wp OK 了、但是前台调用 异步截图 几次没成功 不知道问题所在了!