异步获取评论者网站截图

先上效果(泉哥,这回你可以试效果了,真的放在网站了哈哈哈)

异步获取评论者网站截图
昨天写的抓rss是用PHP的方法,而我们知道PHP本身是不能多线程异步加载的,确实对网速影响太大,所以异步还是不得不用的,只能换了个jQuery的方法,改写自Akismet后台预览,另外,声声说以前willin弄过友链的异步截图,难怪我记得有人写过类似的东西却没有搜到.
评论和友链不一样,具有变动性,昨天一开始给评论赋值ID的时候,用的是其母元素li的id,导致在不同人回复同一个人的情况下,共用了一个母li导致id相同截图抓取异常,所以我们先要给每个评论的comment-author-url都赋值一个不同的id.
在你的模板函数中找到获取评论者昵称和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 cite a[href ^= "http://"]').each(function () {//这段我已经尽量弄的很通用了,如果你的评论结构十分奇葩,可能还是需要自己做相对调整
 		var 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://';
		//下面部分是position样式,根据需要自己调整
		var thisWidth =  jQuery(this).width()+ 15 + 'px';
		if (jQuery(this).find('.mShot').length == 0  ) {
			var thisId = jQuery(this).attr('id').replace('author_comment_url_', '');
			var thisHref = jQuery.URLEncode(jQuery(this).attr('href'));
			jQuery(this).append('<div class="mShot mshot-container" style="left: '+thisWidth+'"><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>');
			//原为s0.wordpress.com,由于国内Wordpress.com已经被墙,昨晚在找可用的截图API时意外发现改成wp就可以正常访问
			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', thisWidth).show();
		}
	}).mouseout(function () {
		jQuery(this).find('.mShot').hide();
	});
});	 
//将调用API时的http://解码为可识别的字符
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;}
});
// 如果网页加载完毕处于闲置状态,则对图片预加载
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');
	});
});

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 Arch!tect

    沙发 :v5:

    三月 31, 2013 10:42:36
  2. 板 凳 Arch!tect

    没有rss订阅逛过来碰巧拿到热门程序媛沙发的概率有多大 ╮(╯_╰)╭

    三月 31, 2013 10:44:43
  3. 地 板 Arch!tect

    抢完沙发帝的各种家具,撤了╮(╯_╰)╭

    三月 31, 2013 10:47:06
  4. 地 毯 xsinger

    我的邮件?卧槽联通!!!!

    三月 31, 2013 10:50:54
  5. 地 面 Arch!tect

    让你抢我那么多沙发。。。这次我也抢个够~╮(╯_╰)╭~

    三月 31, 2013 10:57:12
  6. 地 下 Arch!tect

    应该没了吧。。。

    三月 31, 2013 10:58:02
  7. 7 楼 Arch!tect

    厄。。。。。再来就到别人家了

    三月 31, 2013 10:58:58
  8. 8 楼 SEO博客

    来晚了。。。。可能是网速的问题。获取效果很慢,鼠标放那,等到花儿都谢了,才看见。

    三月 31, 2013 11:29:08
  9. 9 楼 郑永

    这些土匪啊。。。速度这么快。。

    三月 31, 2013 12:15:12
  10. 10 楼 ChoJemmy

    嘻嘻。真的可以了,我一直以为是鼠标放在头像上会出现,没有。然后放在@加名字那,没有。最后以为是要点击,还是没有,摸索一分钟后发现只要鼠标放在黑色名字那里就行(我没救了。。。 :cry:

    三月 31, 2013 12:41:20
  11. 11 楼 张书杨

    这个功能挺不错 :guzhang:

    三月 31, 2013 13:30:16
  12. 12 楼 跑调的包子

    昨晚打开有点慢,现在基本上2秒可以显示了

    三月 31, 2013 13:57:47
  13. 13 楼 Juncle博客

    :meme: 这截图图片存在哪啊

    三月 31, 2013 15:12:08
  14. 14 楼 DruidFY

    这个折腾地不错~

    三月 31, 2013 16:27:21
  15. 15 楼 Juncle博客

    可以用在留言者墙页面的说! :nono:

    三月 31, 2013 17:17:09
  16. 16 楼 山野愚人居

    很强大的插件啊,羡慕嫉妒恨……

    三月 31, 2013 17:38:04
  17. 17 楼 跑调的包子

    不知道我是第几条评论呢? :er:

    三月 31, 2013 18:03:32
  18. 18 楼 Tokin

    弄个RSS异步或者点击后再开始加载的那种呗…

    三月 31, 2013 19:29:32
  19. 19 楼 郑永

    昨天就发现你这里还对管理员判断不显示,不错哈。

    三月 31, 2013 21:12:09
  20. 20 楼 axiu

    比起图片, 获取文章比较快一些

    四月 1, 2013 09:52:34
  21. 21 楼 airoschou

    我看了啊,没效果嘛 :cao:

    四月 1, 2013 09:54:28
  22. 22 楼 wmtimes

    老文章又都被你翻出来了。整合一下也不错。

    四月 1, 2013 12:44:34
  23. 23 楼 婴儿游泳池

    这是遇见美女程序员了

    四月 1, 2013 15:09:45
  24. 24 楼 集趣

    这个功能很不错,可以预先知道是什么样的网站,让用户判断是否需要访问

    四月 1, 2013 16:31:06
  25. 25 楼 空空裤兜

    程序猿大牛啊

    四月 1, 2013 21:34:00
  26. 26 楼 大发

    我撸过类似的东西。。。

    四月 1, 2013 23:50:06
  27. 27 楼 爱美爱魅

    亲说的get_comment_author_link,是哪个文件里面的呢?我找到的怎么不一样呀。。匆忘回复。 :kelian:

    四月 3, 2013 17:42:26
  28. 28 楼 爱美爱魅

    我找到的是:sprintf( ‘%s’, get_comment_author_link() ),
    我是小白哈。。求教。

    四月 3, 2013 17:45:11
    • 小蝴蝶

      @爱美爱魅 一样的。。

      2801室 四月 4, 2013 13:08:50
    • 小蝴蝶

      @爱美爱魅 那一行前后如果有php就可以直接换 没有的话要看情况来改

      2801室 四月 4, 2013 15:06:42
    • 小蝴蝶

      @爱美爱魅 把从<div class=”comment-author vcard”> 到 <?php edit_comment_link( __( ‘Edit’, ‘twentyeleven’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?> 之间的 那段PHP,改成下面的

      					<?php
      						$avatar_size = 68;
      						if ( '0' != $comment->comment_parent )
      							$avatar_size = 39;
      
      						echo get_avatar( $comment, $avatar_size );?>
      <cite style="font-style: normal;"><a href="<?php comment_author_url(); ?>" rel="external nofollow" target="_blank" id="url-<?php comment_ID() ?>"><?php comment_author(); ?></a></cite>
      <?php
      
      						/* translators: 1: comment author, 2: date and time */
      						printf( __( 'on %s <span class="says">said:</span>', 'twentyeleven' ),
      							sprintf( '<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
      								esc_url( get_comment_link( $comment->comment_ID ) ),
      								get_comment_time( 'c' ),
      								/* translators: 1: date, 2: time */
      								sprintf( __( '%1$s at %2$s', 'twentyeleven' ), get_comment_date(), get_comment_time() )
      							)
      						);
      					?>
      
      2801室 四月 4, 2013 18:41:44
  29. 29 楼 爱美爱魅

    中间有代码没发出来。。这个插入不了代码吧?

    四月 3, 2013 17:53:53
  30. 30 楼 爱美爱魅

    多谢美女程序媛的耐心指导 :guzhang: ,已经按您的意思操作了。。但是没有效果哦 :fue: 。现在不清楚是什么情况。。我对LINUX有点了解,对PHP只能是依葫芦画瓢 :cry: ,希望可以帮忙看一下,这边应该怎么操作。。 :guzhang: :guzhang:

    四月 5, 2013 21:36:17
    • 小蝴蝶

      @爱美爱魅 你有加载js库吗?

      3001室 四月 5, 2013 22:38:16
      • 爱美爱魅

        @小蝴蝶 嗯嗯。已经加载的哦。别的特效是可以的。。加载的版本好像是1.8的。。不知道有没有影响。。还是那一段JS有问题,修改的地方我感觉没有问题。。感谢回复。

        3002室 四月 5, 2013 22:46:53
        • 小蝴蝶

          @爱美爱魅 我看了你的结构,js没问题,可能是冲突,你试着用<script type="text/javascript"></script>包起来扔到底部模板里看看行不行

          3003室 四月 5, 2013 22:51:12
          • 爱美爱魅

            @小蝴蝶 好的,马上试一下,现在是放在Header里面。。我放到Footer里面试一下。谢谢

            3004室 四月 5, 2013 22:54:15
            • 小蝴蝶

              @爱美爱魅 放在顶部和底部是一样的… 不知道你那里什么原因 我去看一下

              3005室 四月 5, 2013 22:59:12
              • 爱美爱魅

                @小蝴蝶 放底部就可以了呀。。郁闷。不知道啥问题。。谢谢,非常感谢。。膜拜技术党,谢谢程序媛。 :keai:

                3006室 四月 5, 2013 23:01:02
                • 小蝴蝶

                  @爱美爱魅 我刚看了一下,你顶部放了许多js,可能引起了冲突,现在可以了就好~

                  3007室 四月 5, 2013 23:01:46
                  • 爱美爱魅

                    @小蝴蝶 嗯,我没有拿出来单独放一个文件,感觉没必要哈。。。还有就是即时预览显示网站的时候,这边回复框会被往下推。。不过没关系了。。最后想的说是:你的网站很漂亮,给人感觉很舒服,特别是特效。。 :keai:

                    3008室 四月 5, 2013 23:06:53
                    • 小蝴蝶

                      @爱美爱魅 谢谢~ :keai:
                      往下推是因为没加css,

                      .mshot-arrow {border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid #fff;left: -10px; top: 91px; }
                      .mshot-container { background: #fff; position: absolute; top: -84px; padding: 7px; width: 450px; height: 338px; z-index: 20000;  border-radius:6px;border:1px solid #ccc; }
                      .mshot-container img{max-width:100%;max-height:100%;}
                      3009室 四月 6, 2013 13:09:44
  31. 31 楼 爱美爱魅

    我看您的网站,今天的即时预览也失效了,是全部失效了吗? :sui:

    四月 5, 2013 21:56:10
  32. 32 楼 张书杨

    尝试添加了两回都没能成功,JS调用应该是OK的,估计是代码修改问题,模板函数里没有找到“<?php printf(__('%s‘)”这样的函数,只有omment_author_link(); 就是WP-UserAgent前面那个,改写那个不成功,不过动态评论comments-ajax.php倒是有这么一句代码,但也不起作用。

    四月 6, 2013 09:51:36
  33. 33 楼 张书杨

    刚看了回复 也有可能是JS冲突 再试试看

    四月 6, 2013 09:55:30
  34. 34 楼 张书杨

    功能是实现了,JS的冲突问,但也出现了回复内容被图片向后推的问题,这个要怎么解决?

    四月 6, 2013 10:58:35
  35. 35 楼 爱美爱魅

    刚看了后面的评论,张书杨用的是WP-UserAgent插件,可能函数表里面有代码,但是我用的是Show-UserAgent,在函数表里面没有体现出来。。找不到显示的PHP代码。。我现在用的是插件FAQ里面的手动调用,但是后台设置里面的功能全部失效,而且显示效果也不一样。。。 :han:

    四月 6, 2013 20:44:40
  36. 36 楼 3qsami

    今天才知道原来除了程序猿,还有程序媛~媛得好,媛得妙…… :cool:
    言归正传,这个 s0.wordpress.com 被屏蔽是不假,不过 s0.wp.com 却真的是不稳定,尤其是加上“/mshots/v1”之后抽风的频率也比较大。不知道有没有其它可以推荐的?这个“图”的关键就是这个地址啊~
    因为不是程序猿,所以换成别的网站不知道要怎么写,甚至换成“https://s.wordpress.com”或者“https://s-origin.wordpress.com/”要怎么体现这个“https”都不知道,还请指点。 :guzhang:

    四月 17, 2013 16:48:44
  37. 37 楼 yxiao

    为什么出现这个错误:XMLHttpRequest cannot load http://s0.wp.com/mshots/v1/http%3A%2F%2Fwww.tiandiyoyo.com?w=450. Origin http://www.imyxiao.com is not allowed by Access-Control-Allow-Origin.

    四月 19, 2013 18:56:27
    • 小蝴蝶

      @yxiao 应该是从wp请求截图过程中的问题,原因还不知道,不过不影响效果

      3701室 四月 20, 2013 14:10:18
  38. 38 楼 刘荣焕

    前几次没搞成 今天弄好了 竟然发现还和jq的版本有关

    四月 27, 2013 12:55:48
  39. 39 楼 从良未遂

    我的是这样的,该怎么改啊?
    printf( ‘<cite>%1$s %2$s</cite>’,
    get_comment_author_link(),

    五月 27, 2013 14:29:12
  40. 40 楼 从良未遂

    完整代码是这样的:
    <?php
    echo get_avatar( $comment, 44 );
    printf( '<cite>%1$s %2$s</cite>’,
    get_comment_author_link(),
    // If current post author is also comment author, make it known visually.
    ( $comment->user_id === $post->post_author ) ? ‘ ‘ . __( ‘Post author’, ‘twentytwelve’ ) . ” : ”
    );
    printf( ‘<a href=”%1$s” rel=”nofollow”>%3$s</a>’,
    esc_url( get_comment_link( $comment->comment_ID ) ),
    get_comment_time( ‘c’ ),
    /* translators: 1: date, 2: time */
    sprintf( __( ‘%1$s at %2$s’, ‘twentytwelve’ ), get_comment_date(), get_comment_time() )
    );
    ?>

    五月 27, 2013 14:31:23
  41. 41 楼 try

    o,好像是失效了,蝴蝶姐姐

    六月 15, 2013 18:25:55
  42. 42 楼 znboy

    程序媛自己改写了wordpress?

    七月 17, 2013 08:25:21
  43. 43 楼 kn007

    有点像网站快照

    七月 21, 2013 19:51:35
  44. 44 楼 神经大爆炸

    调试无果 请求支援!

    十一月 27, 2013 14:36:19