読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

はてなブログのソーシャルボタンを5秒後に遅延ロードする

はてなブログ

はてなブログのソーシャルボタンはとても重いです。

記事ページはまあなんとか許容範囲かと思いますが、トップページに5記事を表示したりしますと、ボタンの表示だけに3,4秒かかっています。

で、何とかならないかといろいろ考えてみました。



「続きを読む」を入れて、トップページのソーシャルボタンを削除してしまう

// Socialボタン削除
(function(){
  if (document.body.className.indexOf('page-index') !== -1) { // 7.29追加
    Array.prototype.forEach.call(document.querySelectorAll('.social-buttons'), function(node) {
      node.parentNode.removeChild(node);
    });
  }
})();

いっそのこと、'.social-buttons' を '.entry-footer' に変えてフッターごと削除してしまえばすっきりするかもしれません。

ソーシャルボタンを遅延ロード

しばらくは上の方法をとっていたのですが、当サイトは、左サイドに、表示記事へスムーズスクロールリンクを置いていますので、それをクリックして該当記事へ移動しても、再び「続きを読む」では二度手間になってしまいます。

そこで、現在は、ソーシャルボタンを5秒後に読み込む方法をとっています。

(function(){
  if(document.querySelector('.social-button-item') !== null){
    var array = new Array(),
      socials = document.querySelectorAll('.social-buttons');
    Array.prototype.forEach.call(socials, function(social) {
      array.push(social);
      social.parentNode.removeChild(social);
    });

    setTimeout( function(){
      Array.prototype.forEach.call(document.querySelectorAll('.entry-footer'), function(footer) {
        var socials = array.shift();
        socials.querySelector('.fb-share-button').setAttribute('data-size', 'large');
        footer.insertBefore(socials, footer.children[1]);
      });

      FB.XFBML.parse();
      twttr.widgets.load();
      gapi.plusone.go();
    },5000);
  }
})();

この方法、結構タイミングが難しく、window.onload や DOMContentLoaded ではうまくいかず、即時関数で カスタマイズ > フッタ に入れています。

また、各ボタンの HTML要素は、はてなブログの設定で全て非表示にし、あらためて Javascript で構築する方法も試したのですが、かえって時間がかかってしまいます。

ソーシャルボタンを任意のタイミングで表示する

上の方法、ソーシャルボタンを一旦配列に取り込んで、5秒後に吐き出しているのですが、はてなブックマーク以外は、吐き出すだけでは表示してくれません。それぞれ次のコードで再表示を呼び出せるようです。

FB.XFBML.parse();
twttr.widgets.load();
gapi.plusone.go();

スクロールタイミングで1記事分ずつ表示する

ソーシャルボタンを5秒後に表示する方法は、やってみますと、あまり意味がないようです。

つまり、はてなブログが元々重いこともありますし、さらに当サイトは Javascript でかなり DOM をいじっていますので、表示完了まで3秒くらいかかっています。結局ほとんど間もなくソーシャルボタンの読み込みが始まることになりますので、続けてやっても同じかな?ということです。

ですので、現在、該当記事のフッターに近づいたらソーシャルボタンを表示するよう出来ないかと思案中です。

続く。

www.imuza.com