はてなブログ爆速計画＝ソーシャルボタンをスクロールタイミングで遅延ロードする

はてなブログのソーシャルボタンが重いということで、５秒後に読み込む方法を下記記事にしたのですが、もうひとつでしたので、今度は記事ブロックがウィンドウの上に到達した時に読み込む方法を考えてみました。

www.imuza.com

考え方は、social-buttons を配列に退避するのは上の方法と同じですが、その際に、該当記事の ID を二次元配列として一緒に保存しておき、スクロールイベントで、その記事ブロックの getBoundingClientRect().top を監視しています。

トップページに複数記事を表示している場合は、順次、監視座標を次の記事ブロックに移します。最後の記事に到達したら、スクロールイベントを削除します。

（注）デスクトップは OK ですが、モバイルでは上手く動かないようです。再挑戦です。 ←勘違いでした。

(function(){
  // トップページと記事ページのみ
  var page = document.body.className;
  if (page.indexOf('page-index') !== -1 || page.indexOf('page-entry') !== -1) {
    var array = new Array(),
      entries = document.querySelectorAll('.entry');
    // 各エントリーのIDとsocial-buttons要素を配列に入れる
    Array.prototype.forEach.call(entries, function(entry) {
      var social = entry.querySelector('.social-buttons');
      array.push( new Array(entry.id, social ));
      // social-buttons要素を削除
      social.parentNode.removeChild(social);
    });


    function putSocial(arr){
      return function(){
        var entryTop = document.getElementById(arr[0][0]).getBoundingClientRect().top;
        // エントリーがウィンドウの上に到達したら
        if ( entryTop < 1 ) {
          var entry = arr.shift(),
            social = entry[1];
          // facebook buttonをlargeに変える
          social.querySelector('.fb-share-button').setAttribute('data-size', 'large');
          var node = document.getElementById(entry[0]).querySelector('.entry-footer');
          // social-buttons要素を所定の位置に戻す
          node.insertBefore(social, node.children[1]);
          // 全て戻したらスクロールイベントを削除
          if (arr.length === 0) window.removeEventListener('scroll', arguments.callee, false);
          // FB,Twitter,Google+を呼び出す
          FB.XFBML.parse();
          twttr.widgets.load();
          gapi.plusone.go();
        }
      }
    }
    // 配列を引数にスクロールイベントを設定
    window.addEventListener('scroll', putSocial(array), false);
  }
})();

ただ、当サイトは、他のプログラムとの関係で、まだ未解決の問題がありますので導入していません。導入しているのは次のサイトです。

ausnichts.hatenablog.com

mankan.hatenablog.jp