Intersection Observer - Lazy Loading

by hyeyoon

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<div class="example">
  <h1 class="title">Scroll Down <span class="arrow">πŸ‘‡</span></h1>
  <img src="https://picsum.photos/600/400/?random?0" alt="random image" class="image-default">
  <img data-src="https://picsum.photos/600/400/?random?1" alt="random image" class="image">
  <img data-src="https://picsum.photos/600/400/?random?2" alt="random image" class="image">
  <img data-src="https://picsum.photos/600/400/?random?3" alt="random image" class="image">
  <img data-src="https://picsum.photos/600/400/?random?4" alt="random image" class="image">
  <img data-src="https://picsum.photos/600/400/?random?5" alt="random image" class="image">
  <img data-src="https://picsum.photos/600/400/?random?6" alt="random image" class="image">
  <img data-src="https://picsum.photos/600/400/?random?7" alt="random image" class="image">
</div>

CSS

.example {
  padding-top: 400px;
  padding-bottom: 100px;
  width: 100%;
  background: #eee;
  position: relative;
}

.title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  display: inline-block;
  animation: bounce 1s infinite ease;
}

.image {
  margin: 20px 0;
  padding: 20px 0;
  display: block;
  height: 100%;
  min-height: 60px;
  width: 100%;
}

.image-default {
  padding: 20px 0;
  display: block;
  width: 100%;
}

JavaScript

const options = {
	root: null,
  rootMargin: '10px 0px',
  threshold: 0
}

// IntersectionObserver λ₯Ό λ“±λ‘ν•œλ‹€.
const io = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
  	// κ΄€μ°° λŒ€μƒμ΄ viewport μ•ˆμ— λ“€μ–΄μ˜¨ 경우 image λ‘œλ“œ
    if (entry.isIntersecting) {
    	console.log(entry);
    	entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  })
}, options)

// κ΄€μ°°ν•  λŒ€μƒμ„ μ„ μ–Έν•˜κ³ , ν•΄λ‹Ή 속성을 κ΄€μ°°μ‹œν‚¨λ‹€.
const images = document.querySelectorAll('.image');
images.forEach((el) => {
  io.observe(el);
})