异步加载评论者网站截图

很久以前,我曾加过一段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了,刷新试试吧,异步加载不影响页面加载速度,你也可以在本站下面把鼠标放评论作者网站链接上看看实际效果。


分类:网络博客 标签:,,,,,

已经有49条评论!

 

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

    沙发!
  2. 看到了,很炫的效果,我也装上去试试。

    板凳!
  3. 沙发

    地板!
  4. 呵呵,来试试我的可以调用到不!!

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

    6F
  6. Google的统计代码也加上?

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

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

    12F
  9. 看你的博客学习了很多

    14F
  10. 就像WP后台做的那样 挺不错的

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

    16F
  12. 我咋说呢,原来这个办法 :cool:

    17F
  13. 这个加载速度比后台的快多了

    18F
  14. 原来用过kan大师的。

    19F
  15. 这个功能不错。

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

    21F
  17. 这个功能不错,去折腾一下

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

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

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

    26F
  21. 测试几次  没的效果!

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

    28F

怎么样?你也说一句吧!

gravatar

汗 色 悲 闭嘴 调皮 笑 惊 亲 雷 馋 晕 酷 奸 怒 狂 萌 吃 贪 囧 羞 哭