오늘 한 일:

• shlee 포폴 사이트: customized obserber 적용

lazy loading - 2

1. getBoundingClientRect 사용하기

intersectionObserver api의 호환성 문제때문에(ie 미지원) getBoundingClientRect를 사용할 수 있음

getBoundingClientRect()로 간단하게 visibility 체크

• getBoundingClientRect : viewPort와 관련된 엘리먼트 정보를 리턴하는 api

function isInViewport(el) {
    domRect = el.getBoundingClientRect();
    return (
        domRect.bottom >= 0 &&
        domRect.right >= 0 &&
        domRect.top <= (windon.innerHeight || document.documentElemnt.clientHeight) &&
 		domRect.left <= (windon.innerWidth || document.documentElemnt.clientWidth) &&       
    )
}

• 뷰포트 사이즈를 확인하기 위해 window.innerHeight와 document.documentElement.clientHeight 사용

2. noscript

3. link 사용하기

이미지로 이동할 수 있는 링크를 먼저 생성

이미지 로드가 되면 링크 삭제 후 로드된 이미지 보이기