JavaScript / Library / Lozad.js / 이미지 Lazy Loading 구현해주는 라이브러리

Lazy Loading

웹 페이지의 로딩 속도에 큰 영향을 미치는 것 중의 하나는 이미지입니다. 이를 해결해주는 방법 중의 하나가 Lazy Loading입니다.

  1. 웹브라우저에 보이는 영역 안에 있는 이미지는 로드하고, 보이지 않는 부분은 로드하지 않습니다.
  2. 밑으로 스크롤하여 이미지가 있는 영역에 도달하면 그 때 이미지를 로드합니다.

이렇게 하면 불필요한 이미지 로딩으로 인한 속도 저하를 방지할 수 있습니다.

Lozad.js

Lozad.js는 Lazy Loading을 구현해주는 자바스크립트 라이브러리입니다.

Highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API.

특징은 다음과 같습니다.

  • lazy loads elements performantly using pure JavaScript,
  • is a light-weight library, just minified & gzipped,
  • has NO DEPENDENCIES
  • allows lazy loading of dynamically added elements as well,
  • supports <img>, <picture>, iframes, videos, audios, responsive images, background images and multiple background images etc.
  • is completely free and open source.

사용법

  • 다음과 같이 스크립트를 추가합니다.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
	const observer = lozad();
	observer.observe();
</script>
  • 이미지 마크업은 다음과 같이 합니다. src 대신 data-src를 사용하고 class에 lozad를 추가합니다.
<img data-src="images/img-01.jpg" class="lozad">

예제

  • 20개의 이미지를 포함한 HTML 문서입니다.
<!doctype html>
<html lang="ko">
	<head>
	<meta charset="utf-8">
		<title>Lazy Loading</title>
		<style>
			body { font-family: Consolas, sans-serif; }
			h1 { margin: 30px 0px; text-align: center; }
			img { max-width: 100%; display: block; margin: 0px 0px 100px 0px; }
		</style>
	</head>
	<body>
		<div class="a">
			<h1>Lazy Loding</h1>
		</div>
		<div class="b">
			<img data-src="images/img-01.jpg" class="lozad">
			<img data-src="images/img-02.jpg" class="lozad">
			<img data-src="images/img-03.jpg" class="lozad">
			<img data-src="images/img-04.jpg" class="lozad">
			<img data-src="images/img-05.jpg" class="lozad">
			<img data-src="images/img-06.jpg" class="lozad">
			<img data-src="images/img-07.jpg" class="lozad">
			<img data-src="images/img-08.jpg" class="lozad">
			<img data-src="images/img-09.jpg" class="lozad">
			<img data-src="images/img-10.jpg" class="lozad">
			<img data-src="images/img-11.jpg" class="lozad">
			<img data-src="images/img-12.jpg" class="lozad">
			<img data-src="images/img-13.jpg" class="lozad">
			<img data-src="images/img-14.jpg" class="lozad">
			<img data-src="images/img-15.jpg" class="lozad">
			<img data-src="images/img-16.jpg" class="lozad">
			<img data-src="images/img-17.jpg" class="lozad">
			<img data-src="images/img-18.jpg" class="lozad">
			<img data-src="images/img-19.jpg" class="lozad">
			<img data-src="images/img-20.jpg" class="lozad">
		</div>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
		<script>
			const observer = lozad();
			observer.observe();
		</script>
	</body>
</html>

테스트

  • 위 예제를 크롬에서 테스트해보겠습니다.
  • 크롬으로 문서를 열고...

  • F12를 눌러 요소 검사를 열고 Network를 클릭합니다.

  • Ctrl+R을 눌러 페이지를 새로 고침합니다.
  • 웹 브라우저의 크기에 따라 적당한 양의 이미지를 로딩합니다.

  • 밑으로 스크롤하면 이미지가 하나씩 추가로 로드됩니다.

Related Posts

JavaScript / 메모

JavaScript / 메모

인코딩 함수, 디코딩 함수 인코딩 함수 escape() encodeURI() encodeURIComponent() 디코딩 함수 unescape() decodeURI() decodeURIComponent() IE8에서 last-child, nth-child 등 가상 클래스 적용시키는 방법 selectivizr HTML 문서의 style 태그 안에 넣은 CSS 코드에는 적용되지 않는다. 외부 CSS 파일에만 적용됩니다. jQuery, prototype 등 다른 자바스크립트 라이브러리가 필요하다.

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

JavaScript / Object / Math.floor(), Math.ceil(), Math.round()

Math.floor() Math.floor()는 어떤 수보다 크지 않은 최대의 정수를 반환합니다. 문법 Math.floor( Number ) Number에는 숫자가 들어갑니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; ...

JavaScript / 조건문 / switch

JavaScript / 조건문 / switch

가장 기본적인 조건문은 if입니다. 하지만 조건식에서 비교할 값이 많다면 코드가 길어지고 가독성이 떨어진다는 단점이 있습니다. 이럴 땐 switch를 사용하는 것이 좋습니다. 문법 switch ( condition ) { case value1: statement1; break; case value2: statement2; break; ... ...

JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기

JavaScript / 다른 페이지로 리다이렉트(Redirect) 하기

자바스크립트를 이용해서 특정 URL로 접속했을 때 다른 URL로 이동시킬 수 있습니다. 다른 URL로 이동시키는 것은 window.location.href 를 이용합니다. 예를 들어 window.location.href = 'http://www.abc.com/'; 은 웹브라우저로 접속했을 때 http://www.abc.com/으로 이동시킵니다. 만약 http://www.abc.com/으로 접속했을 때 http://www.codingfactory.net/로 이동시키고 싶다면 다음과 같이 합니다. if ( window.location == 'http://www.abc.com/' ) { window.location.href='http://www.codingfactory.net/'; }

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

JavaScript / window.matchMedia() / CSS 미디어쿼리를 자바스크립트에 사용하는 메소드

window.matchMedia() CSS는 미디어쿼리를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 설정을 할 수 있습니다. 자바스크립트에서도 window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드입니다. 문법 window.matchMedia( mediaQueryString ) mediaQueryString : CSS 미디어쿼리를 입력합니다. window는 생략할 수 있습니다. 예를 들어 window.matchMedia( '( min-width: 500px )' ) 는 500px 이상을 뜻합니다. 속성 .media : mediaQueryString을 ...

JavaScript / 조건문 / if, else if, else

JavaScript / 조건문 / if, else if, else

특정 조건 만족 시 어떤 작업을 수행하고 싶을 때 사용하는 것이 if, else if, else입니다. 문법 if ( condition1 ) { statement1 } condition1을 만족하면 statement1을 실행합니다. if ( condition1 ) { statement1 } else { statement2 } condition1을 만족하면 statement1을 실행하고, 만족하지 않으면 statement2를 실행합니다. if ( condition1 ) { statement1 } else if ( ...

JavaScript / Object / String.substring() / 문자열 추출하는 메서드

JavaScript / Object / String.substring() / 문자열 추출하는 메서드

.substring() .substring()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substring( start, end ) start와 end로 문자열에서 골라낼 부분의 처음과 끝을 지정합니다. 예를 들어 var str = '123456789'; document.write( str.substring( 1, 4 ) ); 는 234를 출력합니다. start 값은 필수이며, end 값이 지정되지 않으면 문자열의 끝까지를 의미합니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

JavaScript / Object / Array.every() / 모든 원소가 조건에 맞는지 검사하는 메서드

.every() .every()는 배열의 모든 원소가 조건에 맞는지 검사하는 메서드입니다. 모든 원소가 조건을 만족하면 true, 하나라도 만족하지 않으면 false를 반환합니다. 예제 배열의 원소를 오름차순으로 검사하고, 조건을 만족하지 않는 원소가 있으면 검사를 중지하고 false를 반환합니다. 모든 원소를 다 검사했는데 조건을 만족하지 않는 원소가 없으면 true를 반환합니다. 원소가 없는 빈 배열은, 조건은 만족하지 않는 원소가 없으므로 무조건 ...

JavaScript / Object / Array.push(), Array.pop(), Array.unshift(), Array.shift() - 배열에 원소 추가/제거 하기

JavaScript / Object / Array.push(), Array.pop(), Array.unshift(), Array.shift() - 배열에 원소 추가/제거 하기

.push(), .pop(), unshift(), shift() .push()는 배열의 맨 끝에, .unshift()는 배열의 맨 앞에 원소를 추가합니다. .pop()은 마지막 원소를, .shift()는 맨 앞의 원소를 제거합니다. 예제 네 가지 속성을 비교하는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <script> ...

JavaScript / Object / document.getElementById()

JavaScript / Object / document.getElementById()

.getElementById() .getElementById()는 id의 값으로 특정한 값을 가진 요소를 가져옵니다. 문법 document.getElementById( 'id' ) id에는 가져오려는 요소의 id의 값을 넣습니다. 예를 들어 var jb = document.getElementById( 'xyz' ); 는 id의 값이 xyz인 요소를 가져와서 변수 jb에 저장합니다. 예제 id의 값이 ab인 요소를 가져와서 몇 가지를 출력하는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...