IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

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

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

2016/07/26 javascript, はてなプラグイン, はてなブログ

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

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

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

  • 「続きを読む」を入れて、トップページのソーシャルボタンを削除してしまう
  • ソーシャルボタンを遅延ロード
  • ソーシャルボタンを任意のタイミングで表示する
  • スクロールタイミングで1記事分ずつ表示する

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

// 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秒くらいかかっています。結局ほとんど間もなくソーシャルボタンの読み込みが始まることになりますので、続けてやっても同じかな?ということです。

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

続く。