Image lazy load (Image blur)

📌 lazy load blur 

안녕하세요 TriplexLab입니다.
오늘은 lazy load blur에 관해서 이야기를 해보도록 하겠습니다.

먼저 lazy load은 지연된 로딩을 말합니다.(이미지 로더)
이것을 이용해서 Image Lazy Loading을 만들 수가 있습니다.

🖼 Image Lazy Loading

보통 클라이언트(브라우저)에서는 IntersectionObserver라는 객체를 사용해
Image Lazy Loading을 구현시킬 수 있습니다.

간단하게 설명하면 사용자가 화면에 보이는 이미지만 로딩을 하고,
화면 밖에 있는 이미지는 아직 로딩을 하지 않는 것입니다.(이로 인해 페이지 로딩 속도를 개선할 수가 있습니다.)

👨‍💻 Image Lazy Loading 코딩 설명

간단히 설명을 하자면 로딩을 했을 시점에 브라우저 화면에 보이는 이미지만 정상적으로 로딩을 합니다.
그리고 스크롤을 한번 내리면 잠깐 blur라 나오면서 정상적인 이미지가 됩니다. 
그리고 모두 이미지 로딩했으면 타겟 엘리먼트에 대한 관찰을 멈춥니다.

(function(){
	const target = Array.from(document.querySelectorAll('.card')); // 감시할 대상자

	function callback(entries, observer){
		entries.forEach(entry => {
			const image_full = entry.target.querySelector('.card-image').getAttribute('data-image-full');
			const image_small = entry.target.querySelector('.card-image').getAttribute('data-image-small');

			if (entry.intersectionRatio > 0) { // 관찰 대상이 viewport 안에 들어온 경우 'is-loaded' 클래스를 추가 및 이미지 변경
				entry.target.querySelector('.card-image img').src = image_full;
				entry.target.querySelector('.card-image').classList.add('is-loaded');
				observer.unobserve(entry.target); // 이미지를 불러왔다면 타켓 엘리먼트에 대한 관찰을 멈춘다.
			}
		});
	};

	var io = new IntersectionObserver(callback)
	target.forEach(function(el){
		io.observe(el)
	});
})();

 

그럼 반대로 스크롤을 올릴때도 잠깐 blur라 나오면서 정상적인 이미지가 되게 할려면 다음과 같이 하면 됩니다.

if (entry.intersectionRatio > 0) { // 관찰 대상이 viewport 안에 들어온 경우 'is-loaded' 클래스를 추가
	entry.target.querySelector('.card-image img').src = image_full;
	entry.target.querySelector('.card-image').classList.add('is-loaded');
	// observer.unobserve(entry.target); // 이미지를 불러왔다면 타켓 엘리먼트에 대한 관찰을 멈춘다.
} else {
	entry.target.querySelector('.card-image img').src = image_small;
	entry.target.querySelector('.card-image').classList.remove('is-loaded');
}

👉전체 소스코드

전체 소스코드를 github에도 공유합니다.😃🔥👍

GitHub - younhoso/younhoso

결과) 👇

Image Lazy Loading 결과

Image Lazy Loading 결과

영상이 너무 빨리 지나가서 제대로 못 볼수도 있을것 같아 화면 캡처해서 보내 드립니다. 
아래 강조한 부분이 Image Lazy Loading 이라서 선명하지 않은 상태를 보이고 있습니다.