WordPress 实现JavaScript异步加载社交网络代码的方法

JavaScript 执行的时候可能会修改 DOM，影响页面的展现，默认情况下，先加载执行 JavaScript，再加载执行后面的代码才是安全的，加载执行 JavaScript 代码的时候，会停止后面代码的加载执行，这个行为叫做阻塞，这个模式就是同步加载。如果我们可以让这些 JavaScript 下载执行的同时，不影响后续页面代码的执行，页面载入速度就会有一定的提升。下面我们以社交网络代码为例，演示一下如何在 WordPress主题中异步加载社交媒体共享按钮，提高页面载入速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37635.html

什么是 JavaScript 异步加载？

异步加载就是浏览器下载执行 JavaScript 的时候，不会影响后面代码的加载和执行。实现异步加载有很多方法，本文中介绍的方法是最常用的，这种方法是在页面中<script>标签内，用JS 创建一个 Script 元素并插入到 Document 中。这样就做到了非阻塞的下载 JavaScript 代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37635.html

异步加载的好处:

• 将提高页面速度（减少加载时间）。加载执行下面页面的同事不需要等待来自其他（社交网络）服务器的响应。
• 网站内容是相对独立的，如果社交网络的服务器加载超市，网站的内容不会受影响。
• 有助于减少用户等待时间，降低跳出率，对 SEO 有一定的帮助。
• 如果用户在我们的网站上停留了比较长的时间，他们将更有可能分享我们的文章。

下面是在 WordPress 实现异步加载社交网络代码的方法，三步即可实现，我们可以根据需要修改下面的代码，来加载自己需要的文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37635.html

第一步: 创建 JavaScript 文件

例如，我们将下面代码加入一个名为 share.js 的文件中，并将其放在主题根文件夹中的 js 文件夹中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37635.html

/* 异步加载分享按钮的 JavaScript */
 
 (function(w, d, s) {
 
   // 插入加载后的代码
   function go(){
  	   var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
  	   if (d.getElementById(id)) { return; }
    	  js = d.createElement(s); js.src = url; js.id = id;
    	  fjs.parentNode.insertBefore(js, fjs);
  	   };
   
       // 加载社交网络分享代码
  	   load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk');  //Facebook
  	   load('https://apis.google.com/js/plusone.js', 'gplus1js');  //Google+
  	   load('//platform.twitter.com/widgets.js', 'tweetjs');  //Twitter
  	   load('//platform.linkedin.com/in.js', 'lnkdjs');  // LinedIN
  	   load('//assets.pinterest.com/js/pinit.js', 'pinitjs');  //Pinterest
    }
 	if (w.addEventListener) {
        w.addEventListener("load", go, false); 
    }
  	else if (w.attachEvent) {
        w.attachEvent("onload",go); 
    }
}(window, document, 'script'));

如果有朋友关注过百度统计或谷歌 Analytics 的异步加载统计代码，会发现他们的代码个上面的代码有类似的地方，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37635.html

第二步: 加载 share.js文件到主题中

添加下面的代码到主题的 functions.php 文件中：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37635.html

/* 插入代码到主题的 functions.php */
function meks_load_scripts(){
 
  //只在文章页面加载，如果需要在页面中加载，使用 "is_singular()"，如果还需要在存档页面加载，直接去掉下面的判断语句即可。
  if(is_single()){
    wp_enqueue_script( 'meks_async_share', trailingslashit(get_template_directory_uri()).'/js/share.js', array( 'jquery' ));
  }
}
 
add_action('wp_enqueue_scripts', 'meks_load_scripts');

第三步: 放置 HTML 代码到主题的模板中

最后一步，在主题的模板中插入“占位符”，脚本执行后将在插入“占位符” 的地方填充共享按钮，最好在循环中使用。代码示例如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37635.html

<?php if( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php the_title(); ?>
<?php the_content(); ?>

<ul class="meks_share">
<!-- twitter -->
<li><a class="twitter-share-button" data-count="vertical" data-via="mekshq" data-url="<?php%20the_permalink()%20?>"></a></li>

<!-- LinkedIN -->
<li><script type="IN/Share" data-counter="top" data-url="<?php%20the_permalink()%20?>"></script></li>

<!-- facebook like -->
<li><div class="fb-like" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-href="<?php%20the_permalink()%20?>"></div></li>

<!-- g+ -->
<li><g:plusone size="tall" data-href="<?php%20the_permalink()%20?>"></g:plusone></li>

<!-- pinterest -->
<li><a href="http://pinterest.com/pin/create/button/?url=<?php%20the_permalink()%20?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&description=<?php echo urlencode(get_the_title()); ?>" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li>
</ul>

<?php endwhile; ?>
<?php endif; ?>

此外，还有两个专门的 JavaScript 库来帮助我们实现异步加载，一个是 ControlJS，一个叫 HeadJS，有兴趣的朋友可以关注一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/37635.html