【javascript】要素が表示されたら実行する方法メモ

はじめに

今回やりたかったのは、ある要素が画面に表示されたら1度だけajaxでサーバ通信するという処理の実装です。
検索するとjqueryのライブラリでjquery.inviewというのがあったのですが今回は前提条件としてjqueryが使えなかったため自前で実装することにしました。

とはいえ、このライブラリから必要な箇所をもってきただけなのですが、、、

実装

<div id="target-div"></div>

<script>
var timer, 
      isRequested = false,
      targetId = "target-div";

timer = setInterval(function() {
  var offsetY = getElementOffsetY(targetId),
        viewportHeight = getViewportHeight();

  if (viewportHeight >= offsetY) {
    if (!isRequested) {
      isRequested = true;
      clearInterval(timer);

      // ★ここにajaxでの通信処理などを実装
    }
  }
}, 250);

function getElementOffsetY(id) {
  var y = document.getElementById(id).getBoundingClientRect().top;
  return y;
},

function getViewportHeight() {
  var height = window.innerHeight;
  if (!height) {
    var mode = document.compatMode;
    if (mode) {
      var domObject = mode == "CSS1Compat" ? document.documentElement : document.body;
      height = domObject.clientHeight;
    }
  }
  return height;
}
</script>

まだいくつかのブラウザでしか確認していないので動かなかったら修正するかもしれませんが、、、
以上です