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 / Object / String.fromCharCode() / 유니코드를 문자로 바꾸는 메서드

JavaScript / Object / String.fromCharCode() / 유니코드를 문자로 바꾸는 메서드

.fromCharCode() .fromCharCode()는 유니코드를 문자로 바꾸는 메서드입니다. 문법 string.charCodeAt( index ) 예제 1 'HELLO'.charCodeAt( 0 ) H의 유니코드 72를 반환합니다. 예제 2 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <script> var jb = 'HELLO'; for ( i = 0; i < jb.length; i++ ) { document.write ( jb.charCodeAt( i ...

JavaScript / JavaScript를 HTML 문서에 삽입하는 방법

JavaScript / JavaScript를 HTML 문서에 삽입하는 방법

HTML 문서에 직접 삽입 HTML 문서 안에 <script> 태그를 만들고, 그 안에 사이에 코드를 넣는 방법입니다. <script> alert ("Hello"); </script> 이 방법은 몇 개의 페이지에 JavaScript를 사용하거나, JavaScript 코드가 짧은 경우에 유용합니다. 스크립트 파일을 만든 후 불러오기 JavaScript 코드를 담은 파일을 만든 후 HTML 문서에 연결시키는 방법입니다. 다음과 같은 내용의 파일을 만들고 hello.js라는 이름으로 저장합니다. (스크립트 파일의 ...

JavaScript / 구문(Statement) 넣는 방법

JavaScript / 구문(Statement) 넣는 방법

자바스크립트는 줄바꿈을 하면 구문(Statement)이 종료된 것으로 봅니다. var jb1 = 'Lorem' var jb2 = 'Ipsum' 하지만, 구문이 완성되지 않았다면 다음 줄까지 해석합니다. 즉 var jb1 = 'Lorem' 과 var jb1 = 'Lorem' 은 같습니다. 구문이 종료되었음을 명확히 표시할 때는 세미콜론(;)을 사용합니다. var jb1 = 'Lorem'; var jb2 = 'Ipsum'; 세미콜론 사용은 선택사항이지만, 한 줄에 여러 구문을 쓸 때는 구문과 구문 사이에 꼭 ...

JavaScript / 객체 / 객체 생성하기

JavaScript / 객체 / 객체 생성하기

객체 생성 방법 1 var jb = { 'a':100, 'b':200, 'c':300 }; 객체 생성 방법 2 var jb = {}; jb = 100; jb = 200; jb = 300; 객체 생성 방법 3 var jb = new Object(); jb = 100; jb = 200; jb = 300; 객체 생성 방법 4 var jb = new Object(); jb.a = 100; jb.b = 200; jb.c = 300;

JavaScript / Object / document.writeln()

JavaScript / Object / document.writeln()

.writeln() .writeln()은 문서에 문자, 코드 등을 쓰는 메서드입니다. .write()와 다른 점은 줄바꿈 기호가 들어간다는 것입니다. 예제 .writeln()에는 줄바꿈 기호가 들어갑니다. 하지만 HTML 특성 상 한 칸 띄어쓴 것처럼 보입니다. pre 태그로 감싸면 줄바꿈이 제대로 표현됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } </style> </head> <body> <p><strong>document.write</strong></p> <script> document.write( ...

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

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

.substr() .substr()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substr( start, length ) start로 시작 위치를 정하고 length로 잘라낼 문자열의 길이를 정합니다. 예를 들어 var str = '123456789'; document.write( '<p>substring( 1, 5 ) : ' + str.substr( 1, 5 ) + '</p>' ); 는 23456을 출력합니다. start 값은 필수이고, length를 지정하지 않으면 문자열의 끝까지를 가져옵니다. 예제 <!doctype html> <html lang="ko"> ...

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 / Location / URL 정보 가져오는 객체

JavaScript / Object / Location / URL 정보 가져오는 객체

location location은 URL 정보를 가져오는 객체입니다. URL 전체 또는 일부의 정보를 가져올 수 있는데, 대표적인 것들은 다음과 같습니다. location location.host location.hostname location.href location.pathname location.protocol 예제 URL이 https://example.codingfactory.net/script/script.html 일 때, 각 객체 속성이 어떤 값을 가져오는지 알아보는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> h1 { ...

JavaScript / 데이터 타입 / 문자열(String)

JavaScript / 데이터 타입 / 문자열(String)

문자열(String) 문자열을 변수의 값으로 사용하려면 작은 따옴표(') 또는 큰 따옴표(")로 감쌉니다. var jb = 'Lorem ipsum dolor'; var jb = "Lorem ipsum dolor"; 문자열에 작은 따옴표가 있다면 큰 따옴표로, 큰 따옴표가 있다면 작은 따옴표로 감쌉니다. var jb = 'Lorem "ipsum" dolor.'; var jb = "Lorem 'ipsum' dolor."; 만약 작은 따옴표와 큰 따옴표가 같이 있다면 역슬래시를 이용합니다. var jb ...

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

JavaScript / Object / Element.setAttribute() / 요소의 속성 값을 정하는 메서드

.setAttribute() .setAttribute()는 선택한 요소(element)의 속성(attribute) 값을 정합니다. 문법 element.setAttribute( 'attributename', 'attributevalue' ) attributename에는 속성 이름을, attributevalue에는 속성값을 넣습니다. 예를 들어 document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' ) id 값이 xyz인 요소의 title 속성을 This is title로 정합니다. 만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용합니다. 예제 id 값이 abc인 요소의 href 속성값을 변경하는 예제입니다. <!doctype html> <html lang="ko"> ...