이 투기적 동작은 JavaScript를 사용하여 요소가 뷰포트 내에 있는지 확인하고 이후에 배경 이미지를 호출하는 스타일을 적용하는 해당 요소에 클래스를 적용하여 CSS에서 이미지 로드를 연기하는 데 사용할 수 있습니다. 이렇게 하면 초기 로드 대신 필요할 때 이미지를 다운로드할 수 있습니다. 예를 들어 큰 영웅 배경 이미지가 포함된 요소를 살펴보겠습니다. 따라서 교차 관찰자 API가 지원되지 않는 브라우저에서 이벤트 리스너 메서드로 대체해야 합니다. 위의 예에서 이를 고려했습니다. 아직 눈치 채지 못한 경우 모든 예제에서 세 번째 이미지(image3.jpg)는 뷰포트 외부에 있더라도 항상 앞에 로드됩니다. 또한 사용자 환경을 높이기 위해 임계값에 정확히 로드하는 대신 동일한 보안 주체를 따라 로드하는 작업을 수행했습니다. 오류가 발생할 경우 수행할 작업을 응용 프로그램에 따라 다릅니다. 예를 들어 사용자가 이미지를 다시 로드할 수 있는 단추로 이미지 자리 표시자 영역을 바꾸거나 이미지 자리 표시자 영역에 오류 메시지를 표시할 수 있습니다.

자바 스크립트를 항상 사용할 수 있다고 가정해서는 안됩니다. 이미지를 지연시킬 경우 JavaScript를 사용할 수 없는 경우 이미지를 표시하는 태그를 제공하는 것이 좋습니다. 가장 간단한 대체 예제는 JavaScript가 꺼져 있는 경우 요소를 사용하여 이미지를 제공하는 것입니다. URL은 데이터 src 특성 대신 src 특성에 직접 존재합니다. 이는 좋은 사용자 경험에 필수적입니다. 이러한 이미지는 페이지 상단에 있기 때문에 가능한 한 빨리 표시되어야 합니다. 이벤트 또는 JS 실행이 로드될 때까지 기다려서는 안 됩니다. 이렇게 하려면 responsiveLazyload() 에서 반환 값인 요소를 표시하거나 숨기는 JS 함수에 콜백을 전달합니다. 그러나 이 지연 로드 예제에서는 뷰포트에 있을 때 요소에 추가할 표시되는 클래스를 통해 div.lazy-background 요소의 배경 이미지 속성을 격리할 수 있습니다. (다음 섹션의 “옵션” 참조) 예를 들어, 또한 지연 로드를 트리거하기 위한 임계값으로 폴드 라인에 대해 너무 엄격하지 않을 수 있습니다. 사용자가 뷰포트로 스크롤하기 전에 이미지가 잘 로드되기 시작하도록 접은 아래의 버퍼 영역을 설정하는 것이 더 이상적일 수 있습니다.

예를 들어 교차 관찰자 API를 사용하면 새 IntersectionObserver 인스턴스를 만들 때 옵션 개체에서 rootMargin 속성을 지정할 수 있습니다. 이렇게 하면 요소가 뷰포트에 있기 전에 지연 로드 동작을 트리거하는 버퍼가 효과적으로 제공됩니다. 모든 이미지 배경에 단색 밝은 회색 색상이 사용됩니다. 그러나 더 만족스러운 사용자 환경을 제공하기 위해 더 잘 할 수 있습니다. 문서의 DOMContentLoaded 이벤트에서 이 스크립트는 지연 클래스가 있는 모든 요소에 대해 DOM을 쿼리합니다. 교차 관찰자를 사용할 수 있는 경우 img.lazy 요소가 뷰포트에 들어갈 때 콜백을 실행하는 새 관찰자를 만듭니다. 이 CodePen 예제를 확인하여 이 코드가 작동하는 지 확인하십시오. 이미지 지연 로드의 예는 페이지 로드시 경량 자리 표시자 이미지를 로드하고 뷰포트로 스크롤할 때 느리게 로드된 이미지로 대체하는 인기 있는 게시 플랫폼 Medium에서 찾을 수 있습니다. ImageKit을 사용하는 주요 색상 자리 표시자 이미지 URL 예제이지만 이 코드는 거의 모든 브라우저에서 작동하지만 반복적인 setTimeout 호출에서 성능 문제가 발생할 수 있습니다.