从 Google 推出 +1 按钮之后就在网站上部署了，后来又添加了 Google 企业信息页徽章。然而天朝封掉了 plusone.js 的服务器，多数人在访问页面的时候都无法正常加载该 js 文件。其实不能显示 +1 按钮也关系不大，可是不能在加载该 js 文件的时候遇到错误往往会使页面加载时间成倍上升。

一直在想办法通过判断 plusone.js 能否正常加载来设置一个过期时间（timeout），让浏览器不要一直等待一个永远不会来的文件。今天终于算是差不多实现了。至于效果怎么样，还有待观察。

1. 实现方法¶

实现这一想法使用的是 jQuery.ajax 方法，所以要用到 jQuery 框架的基础代码 jquery.js 或者 jquery.min.js。下面使用的是 Google 提供的 CDN（WordPress 有个插件 Use Google Libraries 可以将主题、插件中使用的框架代码链接替换为 Google CDN 的链接，但是下面的代码是直接添加到主题模板的）。不用担心，这个一般不会被墙。

只需要将 Google +1 按钮中的第二段代码，

window.___gcfg = {lang: 'zh-CN'};

(function() {
     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
     po.src = 'https://apis.google.com/js/plusone.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();

替换为下面的代码段（以 // 开头的行为注释，使用时可删除），

// 使用时可删除下面一行，如果可用就不需要了，不工作时再加上；后面有解释 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'> 
</script> <script type="text/javascript"> 
$.ajax({
     url: "https://apis.google.com/js/plusone.js",
     type: "GET",
     dataType: "script",
     // 下一行设置的是超时时间 500ms，如果觉得不够可以增大
     timeout: 500 }) 
</script>

// 前面是有问题的代码，修改后的代码从这里开始
// 使用时可删除下面一行，如果可用就不需要了，不工作时再加上；也就是说，如果前面已经加载了 jquery.min.js 就不要再次加载 —— 脚注 1
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> 
<script type="text/javascript">
window.___gcfg = { lang: 'zh-CN' };
( function( $ ) {
	$( document ).ready( function() {
		if ( $( 'body' ).length ) {
			$.ajax( {
				type: 'GET',
				url: 'https://apis.google.com/js/plusone.js',
                                // 下一行设置的是超时时间 500ms，如果觉得不够可以增大
				timeout: 500,
				dataType: 'script',
				cache: true
			} );
		};
	} );
} )( jQuery );
</script>

即可。

在上面的代码，

cache: true

后面还可以增加下面的内容，

success:
	function() {  },
error:
	function() {
		$( 'div.g-plusone' ).hide();
		$( 'div.g-plus' ).parent().hide();
	}

想来大家看看上面的代码就知道什么意思了：如果成功了，什么都不做；如果失败（没有加载到 plusone.js）就将相应的代码框隐藏起来。

其实这一部分没多大用啦，除非有人自己弄了个框框给+1按钮装了起来。

庆幸的是，最近好像可以畅快的访问很多东西了，包括+1按钮。甚至在校园网里面都可以。

2. 存在的问题¶

虽然勉强实现了需要的效果，可是目前还存在一些问题需要解决。列举如下，希望有高手可以帮忙。

• 我将上述代码放到了页面最靠后的位置，前面已经有别的代码需要用到 jquery.min.js 并且已经加载了，可是到这里的时候却不管用，所以只好又加载一次；
• 因为第二次加载 jquery.min.js 代码，导致前面用到的 lazyload 停止工作；
• 希望可以不用 jQuery.ajax 方法，只纯粹用 javascript 实现，可是不知道怎么弄。

3. 更新¶updates

当日 —— 好了，前面存在的问题中的前两个问题已经解决，参考了 github:gist 上的一段代码。问题是我使用的 jQuery 代码段不够规范。唉，又因为 GFW 折腾了一天的时间。

脚注 1：¶

如果在 WordPress 中使用此代码段，也可以通过在（一般位于主题的 footer.php 文件中）

<?php wp_footer(); ?>

一行的前面增加

<?php wp_enqueue_script( 'jquery' ); ?>

来实现自动判断加载 jquery.js 或者是 jquery.min.js，且是最新版本。©

本文发表于水景一页。永久链接：<https://cnzhx.net/blog/load-plusone_js-with-jquery/>。转载请保留此信息及相应链接。