https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
Lazy loading - Web performance | MDN
Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.
developer.mozilla.org
https://imagekit.io/blog/lazy-loading-images-complete-guide/#javascript-dependency-of-lazy-loading
Lazy Loading Images – The Complete Guide
Lazy loading images that are not in the viewport improves initial page load performance and user experience. This is an in-depth guide to everything about lazy loading of images including native lazy loading methods.
imagekit.io
Lazy loading?
지금 당장 필요하지 않는 이미지들의 로딩 시점을 뒤로 미뤄서 웹 성능 향상에 도움되는 기법
구현 data-src로 해서 첫 이미지 로드를 막음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img
class="lazy-image"
data-src="https://images.unsplash.com/photo-1685549926627-6f912e3f465a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2067&q=80"
alt="Lazy-loaded Image"
/>
<img
class="lazy-image"
data-src="https://images.unsplash.com/photo-1685342950270-e72dca6e97af?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1316&q=80"
alt="Lazy-loaded Image"
/>
<img
class="lazy-image"
data-src="https://images.unsplash.com/photo-1685509169424-c3ec59122617?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=80"
alt="Lazy-loaded Image"
/>
<img
class="lazy-image"
data-src="https://images.unsplash.com/photo-1683995667087-d10406a78b60?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2532&q=80"
alt="Lazy-loaded Image"
/>
<script>
function lazyLoadImages() {
const lazyImages = document.querySelectorAll(".lazy-image");
const loadingIndicator = document.querySelector(".loading");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.getAttribute("data-src");
img.setAttribute("src", src);
img.classList.remove("lazy-image");
observer.unobserve(img);
}
});
});
lazyImages.forEach((img) => {
observer.observe(img);
});
}
lazyLoadImages();
</script>
</body>
</html>
