IMUZA.com

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

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

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

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

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

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

AFT 非対応から AFT ハードディスクへ交換した場合のリカバリ
【Plamo6.1】 ネットワーク設定、dhclient.conf が邪魔をしている?
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com