지금은 웹 페이지의 성능이 중요시 되는 시대입니다. 사용자들은 빠른 페이지 로딩 속도를 기대하며, 이미지와 같은 리소스들이 느리게 로딩되면 사용자 경험에 부정적인 영향을 줄 수 있습니다. 이러한 이유로 많은 개발자들은 Lazy Loading이라는 개념을 사용하여 페이지의 성능을 최적화하고 있습니다.

Lazy Loading은 페이지가 처음 로드될 때, 사용자에게 보여지지 않는 이미지 또는 리소스들을 나중에 필요할 때 로드하는 기법입니다. 이를 통해 초기 페이지 로딩 시간과 네트워크 사용을 최소화할 수 있습니다.

하지만 Lazy Loading을 구현하면서 발생할 수 있는 문제 중 하나는 스크롤 이벤트를 기반으로 Load 되어야 할 이미지를 감지하는 것입니다. 스크롤 이벤트는 사용자가 스크롤을 할 때마다 발생하므로, 많은 수의 스크롤 이벤트가 발생할 수 있습니다.

이에 따라, 불필요한 스크롤 이벤트를 최소화하기 위해 스크롤 위치를 감지하는 기능을 함께 결합하는 것이 좋습니다. 스크롤 위치 감지를 통해 페이지 또는 컨텐츠가 사용자의 시야에 들어올 때 이미지 로드를 시작할 수 있습니다.

아래는 자바스크립트를 사용하여 Lazy Loading과 스크롤 위치 감지를 결합하는 예제입니다.

window.addEventListener('scroll', function() {
    var images = document.querySelectorAll('img[data-src]');

    for(var i=0; i<images.length; i++) {
        var image = images[i];
        var rect = image.getBoundingClientRect();

        // 스크롤 위치 감지
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var isVisible = rect.top <= (window.innerHeight || document.documentElement.clientHeight);

        if(isVisible) {
            // 이미지를 로드하기 전에 src 값을 변경하여 이미지를 로드
            image.src = image.getAttribute('data-src');
            image.removeAttribute('data-src');
        }
    }
});

위의 코드는 스크롤 이벤트가 발생할 때마다 이미지 엘리먼트를 찾아 스크롤 위치를 감지하고, 사용자의 시야에 이미지가 들어오면 Lazy Loading을 위해 이미지의 data-src 값을 src로 변경하는 예제입니다.

Lazy Loading과 스크롤 위치 감지를 결합함으로써 사용자들은 페이지를 더 빠르게 로드할 수 있고, 필요한 이미지들이 사용자의 시야에 들어올 때 로드되는 효과를 얻을 수 있습니다. 이를 통해 웹 페이지의 성능을 크게 향상시킬 수 있습니다.

#참고자료

• Implementing Lazy Loading for Images
• Scroll Detection in JavaScript