JavaScript로 이미지 지연 로딩을 구현하는 방법은 무엇입니까?

JavaScript에서 이미지 지연 로딩을 구현하는 방법은 무엇입니까?

모바일 인터넷의 발달로 인해 웹 페이지의 이미지 수가 늘어나고 이로 인해 페이지 로딩 속도가 느려지고 사용자 경험이 저하됩니다. 이 문제를 해결하기 위해 이미지 지연 로딩 기능이 등장했습니다. 이미지의 지연 로딩은 사용자가 이미지 위치로 스크롤할 때 이미지가 다시 로드되어 웹 페이지의 로딩 속도를 향상시키는 것을 의미합니다. 이 기사에서는 JavaScript를 사용하여 이미지 지연 로딩을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 먼저 이미지가 지연 로드되도록 특정 속성을 표시해야 합니다. 이 예에서는 "data-src"를 태그 속성으로 사용하고 이 속성에 이미지의 실제 주소를 저장합니다.

2. 다음으로 JavaScript를 통해 페이지 스크롤 이벤트를 수신하고 이미지가 가시 영역에 들어가는지 확인해야 합니다.

function lazyLoadImages() { var lazyImages = document.querySelectorAll('img[data-src]'); lazyImages.forEach(function(img) { if(isElementInViewport(img)) { img.src = img.getAttribute('data-src'); img.removeAttribute('data-src'); } }); } function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= window.innerHeight && rect.right <= window.innerWidth ); } window.addEventListener('scroll', lazyLoadImages); window.addEventListener('resize', lazyLoadImages);

3. 브라우저가 창을 스크롤하거나 크기를 조정하면scroll및resize이벤트가 트리거됩니다. 이 두 이벤트에서lazyLoadImages<를 호출할 수 있습니다. /code> 함수를 사용하여 이미지를 결정하고 로드합니다. scroll和resize事件，我们可以在这两个事件中调用lazyLoadImages函数来判断并加载图片。
4. 最后，在页面加载完成后立即执行一次lazyLoadImages
마지막으로 페이지가 로드된 직후 lazyLoadImages함수를 한 번 실행하면 첫 화면의 보이는 영역에 이미지가 로드됩니다.

window.addEventListener('load', lazyLoadImages);