异步加载评论者网站截图

网络博客 郑永 13363℃ 49评论

很久以前,我曾加过一段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. 郑永2013-04-03 22:23 Google Chrome 25 Android 4.1.2 回复

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

    沙发!
  2. 胖妹纸2013-04-04 00:21 Firefox 19 Windows XP 回复

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

    板凳!
  3. 小蝴蝶2013-04-04 02:44 Google Chrome 26 Windows 7 回复

    沙发

    地板!
    • 郑永2013-04-04 06:18 Firefox 20 Windows XP 回复

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

    • 小蝴蝶2013-04-04 20:03 Google Chrome 26 Windows 7 回复

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

  4. 不亦乐乎2013-04-04 14:11 Google Chrome 26 Windows XP 回复

    看不到自己的?

    4楼
  5. 619影视2013-04-04 21:27 Firefox 20 Windows 7 回复

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

    5楼
  6. 红色石头2013-04-05 13:09 Google Chrome 25 Windows 7 回复

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

    6楼
    • 郑永2013-04-05 20:27 Firefox 20 Windows XP 回复

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

  7. 林木木2013-04-05 19:25 Google Chrome 27 Windows 7 回复

    Google的统计代码也加上?

    7楼
    • 郑永2013-04-05 20:27 Firefox 20 Windows XP 回复

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

  8. zwwooooo2013-04-05 20:40 Firefox 20 Windows 7 回复

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

    8楼
    • 郑永2013-04-05 21:48 Google Chrome 25 Android 4.1.2 回复

      当时没看到,真遗憾啊。

  9. 沐雨2013-04-05 21:12 Google Chrome 25 Windows 7 回复

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

    9楼
  10. 小蝴蝶2013-04-05 21:23 Google Chrome 26 Windows 7 回复

    再看看

    10楼
  11. 郑永2013-04-05 21:28 Firefox 20 Windows XP 回复

    试试

    11楼
  12. 张书杨2013-04-05 22:03 Google Chrome 26 Windows 7 回复

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

    12楼
    • 郑永2013-04-06 00:25 Firefox 20 Windows XP 回复

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

  13. 土木坛子2013-04-06 04:44 Google Chrome 26 GNU/Linux 回复

    纯粹属于折腾呀。

    13楼
  14. 建筑设计2013-04-06 19:49 Internet Explorer 9 Windows 7 回复

    看你的博客学习了很多

    14楼
  15. Louis Han2013-04-07 00:19 Firefox 20 Windows 7 回复

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

    15楼
  16. Zorro2013-04-07 18:56 Google Chrome 26 Windows 8 回复

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

    16楼
    • 郑永2013-04-09 11:35 Google Chrome 25 Android 4.1.2 回复

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

    • Zorro2013-04-09 14:00 Google Chrome 26 Windows 8 回复

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

    • 郑永2013-04-09 20:47 Google Chrome 25 Android 4.1.2 回复

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

  17. 爱软2013-04-09 08:52 Google Chrome 26 Windows XP 回复

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

    17楼
  18. 空空裤兜2013-04-09 22:12 Google Chrome 26 Windows 7 回复

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

    18楼
    • 郑永2013-04-10 00:32 Firefox 20 Windows XP 回复

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

  19. 阿邙2013-04-13 09:30 Google Chrome 27 Windows XP 回复

    原来用过kan大师的。

    19楼
    • 郑永2013-04-14 07:06 Firefox 20 Windows XP 回复

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

  20. 仰肖2013-04-13 21:59 Google Chrome 26 Windows XP 回复

    这个功能不错。

    20楼
  21. 3qsami2013-04-17 17:08 Google Chrome 26 Windows XP 回复

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

    21楼
    • 郑永2013-04-25 20:40 Firefox 20 Windows XP 回复

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

  22. 从良未遂2013-04-25 15:06 Firefox 20 Windows 7 回复

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

    22楼
  23. 从良未遂2013-04-25 15:29 Firefox 20 Windows 7 回复

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

    23楼
  24. A.yi2013-10-21 21:18 Firefox 24 Windows 7 回复

    不错不错

    24楼
  25. 有点蓝2013-10-27 22:52 Maxthon 4 Windows 7 回复

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

    25楼
  26. 神经大爆炸2013-11-26 21:43 Internet Explorer 9 Windows 7 回复

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

    26楼
    • 郑永2013-11-27 19:25 Wordpress App 2 Android 2.4.5 回复

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

  27. 神经大爆炸2013-11-27 20:59 Internet Explorer 9 Windows 7 回复

    测试几次  没的效果!

    27楼
  28. 神经大爆炸2013-11-27 21:08 Internet Explorer 9 Windows 7 回复

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

    28楼
    • 郑永2013-12-07 20:58 Firefox 25 Windows XP 回复

      呵呵,加油,多动手。

gravatar
发表我的评论
取消评论


Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址