异步加载评论者网站截图

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

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

先放效果图：

在你的模板函数中找到获取评论者昵称和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了，刷新试试吧，异步加载不影响页面加载速度，你也可以在本站下面把鼠标放评论作者网站链接上看看实际效果。

赏