TIL

Today

이벤트에 등록하는 콜백함수는 최대한 간단하고 성능이 무겁지 않은 성능과 연관이 없는 것들만 사용해야 한다.
페이지위에서 레이아웃이 다시 발생하는것은 성능에 좋지 않다.

intersection observer API = 비동기적으로 어떤 변화를 감지하는 웹 API
우리가 원하는 요소가 특정한 영역에 들어왔을 때 알려 주는 우리의 콜백함수를 호출해주는 관찰자.

<script>
	// 클래스 이름이 box인 요소를 모두 가져옴
	const boxes = document.querySelectorAll('.box');
    
    
    const options = {
    	root: document.querySelector('.container'), // viewport
        // 사용자에게 현재 보여지지는 않지만 근접해 있는 경우 내가 이미지를 먼저 
        // 로딩해 놓겠다 or 필요한 컨텐츠를 준비해 놓겠다 할 때 유용하게 사용할 수 있다.
        rootMargin: '0px',
        threshhold: 1, // 0~1 (100%) // 좀더 알아볼것.
    }
    
    const callback = (entries, observer) => {
    	entries.forEach(entry => {
        	if(entry.isIntersecting) {
            	entry.target.classList.add('active');
            } else {
            	entry.target.classList.remove('active');
            }
        });
    };
    
    const observer = new IntersectionObserver(callback, options)
    
    // observer는 관찰하는 특정한 요소들이 화면에 들어오거나 나갈 때 우리가 등록한 
    콜백함수를 호출해준다.
    boxes.forEach(box => observer.observe(box));
</script>