how to detect element size change in javascript

다른 대부분의 라이브러리들은 jquery로 되어있거나 타이머를 두고 지속적으로 엘리먼트의 변화를 감지하기 때문에 성능이슈가 있었다.

 

이 포스트에서는 스크롤 이벤트 기반의 엘리먼트 사이즈 변화를 감지할 수 있는 방법에 대해서 소개한다.

window.addResizeListener = function(element, fn){
    if (!element.__resizeListeners__) {
      element.__resizeListeners__ = [];
      if (attachEvent) {
        element.__resizeTrigger__ = element;
        element.attachEvent('onresize', resizeListener);
      }
      else {
        if (getComputedStyle(element).position == 'static') element.style.position = 'relative';
        var obj = element.__resizeTrigger__ = document.createElement('object'); 
        obj.setAttribute('style', 'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;');
        obj.__resizeElement__ = element;
        obj.onload = objectLoad;
        obj.type = 'text/html';
        if (isIE) element.appendChild(obj);
        obj.data = 'about:blank';
        if (!isIE) element.appendChild(obj);
      }
    }
    element.__resizeListeners__.push(fn);
  };

단순히 빈 객체를 만들고 화면에 보이지 않게끔 적절히 스타일을 넣어준다음에 타겟의 부모를 position:relative로 만들고 그 부모 아래, 타겟과 sibling으로 생성한 빈 객체를 resize이벤트를 달아서 넣어준다. 그럼 타겟의 부모나 타겟의 사이즈가 변경되면 빈 객체도 마찬가지로 변경되기 때문에 타겟의 사이즈 변화를 감지 할 수 있게 된다.