이미지의 레이지 로딩을 구현한 6가지 예제를 아래에서 설명하겠습니다. 레이지 로딩은 이미지를 페이지 스크롤 시 로드하는 기술로, 초기 페이지 로드 속도를 향상시키고 사용자 경험을 개선하는 데 도움이 됩니다.
예제 1: 기본 레이지 로딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 이미지 스타일 */
.lazy-image {
width: 100%;
height: auto;
display: block;
}
</style>
<title>기본 레이지 로딩</title>
</head>
<body>
<img class="lazy-image" src="placeholder.jpg" data-src="image.jpg" alt="Lazy-loaded Image">
<script>
// JavaScript 코드 (선택 사항)
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll(".lazy-image");
lazyImages.forEach((img) => {
img.setAttribute("src", img.getAttribute("data-src"));
});
});
</script>
</body>
</html>
이 예제는 기본적인 레이지 로딩을 구현합니다. 이미지에 data-src 속성을 사용하여 원본 이미지 경로를 지정하고, 페이지가 로드될 때 JavaScript를 사용하여 실제 이미지 경로로 변경합니다.
예제 2: Intersection Observer를 사용한 레이지 로딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 이미지 스타일 */
.lazy-image {
width: 100%;
height: auto;
display: block;
}
</style>
<title>Intersection Observer를 사용한 레이지 로딩</title>
</head>
<body>
<img class="lazy-image" data-src="image.jpg" alt="Lazy-loaded Image">
<script>
// JavaScript 코드
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll(".lazy-image");
const options = {
rootMargin: "0px",
threshold: 0.1,
};
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const image = entry.target;
image.setAttribute("src", image.getAttribute("data-src"));
observer.unobserve(image);
}
});
}, options);
lazyImages.forEach((image) => {
imageObserver.observe(image);
});
});
</script>
</body>
</html>
이 예제는 Intersection Observer를 사용하여 이미지의 레이지 로딩을 구현합니다. 이미지가 화면에 나타나면 원본 이미지로 로드됩니다.
예제 3: 스크롤 이벤트를 사용한 레이지 로딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 이미지 스타일 */
.lazy-image {
width: 100%;
height: auto;
display: block;
}
</style>
<title>스크롤 이벤트를 사용한 레이지 로딩</title>
</head>
<body>
<img class="lazy-image" data-src="image.jpg" alt="Lazy-loaded Image">
<script>
// JavaScript 코드
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll(".lazy-image");
function lazyLoad() {
lazyImages.forEach((img) => {
if (img.getBoundingClientRect().top < window.innerHeight) {
img.setAttribute("src", img.getAttribute("data-src"));
}
});
}
window.addEventListener("scroll", lazyLoad);
lazyLoad();
});
</script>
</body>
</html>
이 예제는 스크롤 이벤트를 사용하여 이미지의 레이지 로딩을 구현합니다. 페이지 스크롤 시 이미지가 화면에 나타나면 원본 이미지로 로드됩니다.
예제 4: 블러 효과와 함께 레이지 로딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 이미지 스타일 */
.lazy-image {
width: 100%;
height: auto;
display: block;
filter: blur(5px); /* 초기 블러 효과 */
transition: filter 0.5s;
}
.lazy-image.loaded {
filter: none; /* 로드 후 블러 효과 해제 */
}
</style>
<title>블러 효과와 함께 레이지 로딩</title>
</head>
<body>
<img class="lazy-image" data-src="image.jpg" alt="Lazy-loaded Image">
<script>
// JavaScript 코드
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll(".lazy-image");
function lazyLoad() {
lazyImages.forEach((img) => {
if (img.getBoundingClientRect().top < window.innerHeight) {
img.setAttribute("src", img.getAttribute("data-src"));
img.classList.add("loaded");
}
});
}
window.addEventListener("scroll", lazyLoad);
lazyLoad();
});
</script>
</body>
</html>
이 예제는 이미지 레이지 로딩과 함께 초기 블러 효과를 사용합니다. 이미지가 로드되면 블러 효과가 해제됩니다.
예제 5: 로딩 스피너와 함께 레이지 로딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 이미지 스타일 */
.lazy-image {
width: 100%;
height: auto;
display: block;
}
/* 로딩 스피너 스타일 */
.loader {
display: none;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>
<title>로딩 스피너와 함께 레이지 로딩</title>
</head>
<body>
<div class="loader"></div>
<img class="lazy-image" data-src="image.jpg" alt="Lazy-loaded Image">
<script>
// JavaScript 코드
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll(".lazy-image");
const loader = document.querySelector(".loader");
function lazyLoad() {
lazyImages.forEach((img) => {
if (img.getBoundingClientRect().top < window.innerHeight) {
loader.style.display = "block"; // 로딩 스피너 표시
img.setAttribute("src", img.getAttribute("data-src"));
img.onload = () => {
loader.style.display = "none"; // 로딩 스피너 숨김
};
}
});
}
window.addEventListener("scroll", lazyLoad);
lazyLoad();
});
</script>
</body>
</html>
이 예제는 이미지 레이지 로딩과 함께 로딩 스피너를 사용합니다. 이미지 로딩 중에 스피너가 표시되고, 이미지가 로드되면 스피너가 숨겨집니다.
예제 6: CSS 애니메이션을 사용한 레이지 로딩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 이미지 스타일 */
.lazy-image {
width: 100%;
height: auto;
display: block;
opacity: 0; /* 초기 투명도 */
transition: opacity 0.5s;
}
.lazy-image.loaded {
opacity: 1; /* 로드 후 투명도 변경 */
}
</style>
<title>CSS 애니메이션을 사용한 레이지 로딩</title>
</head>
<body>
<img class="lazy-image" data-src="image.jpg" alt="Lazy-loaded Image">
<script>
// JavaScript 코드
document.addEventListener("DOMContentLoaded", function () {
const lazyImages = document.querySelectorAll(".lazy-image");
function lazyLoad() {
lazyImages.forEach((img) => {
if (img.getBoundingClientRect().top < window.innerHeight) {
img.setAttribute("src", img.getAttribute("data-src"));
img.classList.add("loaded");
}
});
}
window.addEventListener("scroll", lazyLoad);
lazyLoad();
});
</script>
</body>
</html>
이 예제는 CSS 애니메이션을 사용하여 이미지 레이지 로딩을 구현합니다. 이미지가 로드되면 투명도가 변경되어 나타납니다.
'CSS' 카테고리의 다른 글
| 비디오 배경: 비디오 배경 설정. (0) | 2023.12.23 |
|---|---|
| 텍스트 음영: 텍스트 음영(글자 그림자) 설정. (0) | 2023.12.23 |
| 아코디언 메뉴: 아코디언 메뉴 스타일링. (0) | 2023.12.23 |
| 그리드 레이아웃: 그리드 레이아웃 스타일링. (0) | 2023.12.23 |
| 헤더 스크롤 효과: 스크롤 시 헤더 효과. (0) | 2023.12.23 |
