twitterの埋め込みを軽くする

埋め込むとけっこう重たいみたいですが、調べてもwidgets.jsを読み込むスクリプトタグを後から追加くらいしか見当たらなかったのでメモとして書きます。

前提となる技術

IntersectionObserverを使います。IEがさよならバイバイしたので便利な世の中になりました。

コードスニペット

<!-- 埋め込みのコピペ、aタグのclass属性の中身を変えて埋め込みが実行されないようにしてある -->
<a class="pre-twitter-timeline" data-height="500" href="https://twitter.com/elonmusk?ref_src=twsrc%5Etfw">Tweets by elonmusk</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- IntersectionObserverを使い、見えるようになったらaタグのclass属性を正しいものにして埋め込みを実行 --><script type="text/javascript">
  const elm = document.querySelector('a.pre-twitter-timeline');
  const observer = new IntersectionObserver((entries) => {
    if (!entries[0].isIntersecting) return;
    observer.unobserve(elm);
    elm.classList.remove('pre-twitter-timeline');
    elm.classList.add('twitter-timeline');
    twttr.widgets.load();
  });
  observer.observe(elm);
</script>

参考