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 / 주석(Comment) 넣기

JavaScript / 주석(Comment) 넣기

한 줄 주석 한 줄 주석은 //로 만듭니다. // single line comment // 앞은 코드로 처리하고, // 뒤는 주석으로 처리합니다. 예를 들어 var jb = 'hi'; // Comment 라고 var jb = 'hi';는 코드로 인식합니다. 여러 줄 주석 여러 줄을 주석으로 만들 때는 /*와 */로 둘러쌉니다. /* Comment 1 Comment 2 ​*/ 읽기 좋게 다음과 같은 모양으로 만들기도 ...

JavaScript / Object / Screen / 화면 정보 가져오는 객체

JavaScript / Object / Screen / 화면 정보 가져오는 객체

Screen Screen은 화면 정보를 가져오는 객체입니다. 속성은 다음과 같습니다. screen.width 화면의 가로 크기를 가져옵니다. screen.height 화면의 세로 크기를 가져옵니다. screen.availWidth 작업 표시줄이 차지하는 부분을 제외한 가로 크기를 가져옵니다. screen.availHeight 작업 표시줄이 차지하는 부분을 제외한 세로 크기를 가져옵니다. screen.colorDepth screen.pixelDepth IE는 버전 10 이상에서 사용할 수 있습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

JavaScript / Object / String.concat() / 문자열을 이어 붙이는 메서드

.concat()  .concat()은 문자열을 이어 붙이는 메서드입니다. 문법 string1.concat( ) string1은 필수 요소, string2 등은 선택 요소입니다. 인수가 문자열이 아닌 경우 먼저 문자열로 변환한 다음 string1에 연결합니다. 예를 들어 'ab'.concat( 'cd', 'ef' ) 는 abcdef입니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> ...

JavaScript / Object / document.write()

JavaScript / Object / document.write()

.write() .write()은 문서에 문자, 코드 등을 쓰는 메서드입니다. 문법 document.writeln( exp1, exp2, ... ) 예제 document.writeln( 'Hello', 'World' ); Hello와 World를 연달아 출력합니다. document.writeln( 1+1 ) 2를 출력합니다. document.writeln( '<p style="font-size: 80px; text-align: center;">Hello</p>' ); 코드는 코드로 인식합니다. document.writeln( '<script>document.write( "Hello" )<\/script>' ); 닫는 script 태그에는 \를 붙여서 <\/script>로 씁니다. JavaScript / Object / document.writeln()

JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()

JavaScript / 함수 / encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent()

encodeURI(), encodeURIComponent(), decodeURI(), decodeURIComponent() encodeURI() : 인터넷 주소에서 사용하는 :, ;, /, =, ?, & 등을 제외하고 인코딩하는 함수입니다. encodeURIComponent() : 모든 문자를 인코딩하는 함수입니다. decodeURI() : encodeURI()로 인코딩한 문자열을 디코딩하는 함수입니다. decodeURIComponent() : encodeURIComponent()로 인코딩한 문자열을 디코딩하는 함수입니다. 문법 encodeURI( uri ) encodeURIComponent( uri ) decodeURI( uri ) decodeURIComponent( uri ) uri : 인코딩하려는 인터넷 주소를 입력합니다. 예제 특수문자와 한글을 포함한 URI를 인코팅, ...

JavaScript / Object / Math.max(), Math.min()

JavaScript / Object / Math.max(), Math.min()

Math.max(), Math.min() Math.max()는 주어진 값 중에서 최댓값을, Math.min()은 최솟값을 반환합니다. 문법 Math.max( number1, number2, number3, ... ) Math.min( number1, number2, number3, ... ) 예제 1 10, 20, 30 중에서 최댓값과 최솟값을 구합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> document.write( '<p>Math.max( 10, 20, 30 ) : ' + Math.max( 10, 20, 30 ) + '</p>' ); document.write( '<p>Math.min( 10, ...

JavaScript / 반복문 / while, do - while, for

JavaScript / 반복문 / while, do - while, for

자바스크립트 반복문에는 while, do - while, for 세가지가 있습니다. while 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 ...

JavaScript / Object / String.charAt(), String.charCodeAt()

JavaScript / Object / String.charAt(), String.charCodeAt()

.charAt(), .charCodeAt() .charAt() : 특정 위치에 있는 문자를 반환합니다. .charCodeAt() : 특정 위치에 있는 문자의 유니코드 값을 반환합니다. 문법 - .charAt() string.charAt( n ) 인덱스의 값이 n인 문자를 반환합니다. 예를 들어 "12345".charAt( 2 ) 는 3입니다. 만약 인덱스 n에 문자가 없으면 빈 문자열을 반환합니다. 문법 - .charCodeAt() string.charCodeAt( n ) 인덱스의 값이 n인 문자의 유니코드 값을 반환합니다. 예를 들어 "12345".charCodeAt( 2 ) 는 3의 유니코드 ...

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

JavaScript / Object / String.repeat() / 문자열을 반복한 값을 반환하는 메서드

.repeat() .repeat() – 문자열을 반복한 값을 반환하는 메서드입니다. IE는 Edge부터 지원합니다. 문법 string.repeat( count ) 예제 'abc'.repeat( 2 ) abc를 두 번 반복한 abcabc를 반환합니다.

JavaScript / Object / Array.concat() / 기존 배열에 원소 또는 배열을 추가하여 새 배열 만들기

JavaScript / Object / Array.concat() / 기존 배열에 원소 또는 배열을 추가하여 새 배열 만들기

.concat() .concat() 속성을 이용하여 기존 배열에 원소 또는 배열을 추가하여 새 배열을 만들 수 있습니다. 문법 var jbAry2 = jbAry1.concat( 'abc' ); jbAry1 배열에 문자열 abc를 추가하여 jbAry2 배열을 만듭니다. var jbAry3 = jbAry1.concat( jbAry2 ); 두 배열 jbAry1과 jbAry2를 합하여 새로운 배열 jbAry3을 만듭니다. 예제 다음의 두 예제는 같은 결과를 만듭니다. <!doctype html> <html lang="ko"> <head> ...

JavaScript 강좌