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을 눌러 페이지를 새로 고침합니다.
  • 웹 브라우저의 크기에 따라 적당한 양의 이미지를 로딩합니다.

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

같은 카테고리의 다른 글
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 / 연산자 / 비교 연산자

JavaScript / 연산자 / 비교 연산자

변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 비교 연산자는 8가지가 있는데, 각 연산자의 의미를 알아보겠습니다. == ==는 '같다'입니다. 변수 타입과 상관없이 값이 같으면 참입니다. 즉 5 == 5 도 참이고 '5' == 5 도 참입니다. != !=는 '같지 않다'입니다. === ===는 '엄격하게 같다'입니다. '엄격하게'의 의미는 변수 타입까지 고려한다는 것입니다. 변수의 값 뿐 아니라 ...

JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성

JavaScript / Object / Array.slice() / 배열의 일부분을 선택하여 새로운 배열을 만드는 속성

.slice() .slice()는 배열의 일부분을 선택하여 새로운 배열을 만듭니다. 문법 array.slice( start, end ) start와 end에는 숫자가 들어갑니다. 배열의 start에 해당하는 요소부터 end 바로 전의 요소까지를 선택하여 새로운 배열을 만듭니다. 예를 들어 jbAry.slice( 2, 5 ); 는 jbAry 배열의 3번째 요소부터 5번째 요소까지 선택합니다. end에 값이 없으면 해당 배열의 마지막 요소까지 선택합니다. 값이 음수면 마지막 요소를 기준으로 선택합니다. 예제 <!doctype html> <html ...

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 / Library

JavaScript / Library

Uncategorized html5shiv - IE 8 이하에서 HTML5 태그 지원하게 해주는 라이브러리 imagesLoaded - 이미지가 로드되었음을 감지하는 라이브러리 Masonry - 벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리 Respond.js - IE8 이하에서 미디어 쿼리(Media Query)를 사용하게 해주는 라이브러리 turn.js - 책장을 넘기는 듯한 플립(flip) 효과를 만들어 주는 라이브러리

JavaScript / Object / String.indexOf(), String.lastIndexOf() / 특정 문자열이 있는 위치를 반환하는 메서드

JavaScript / Object / String.indexOf(), String.lastIndexOf() / 특정 문자열이 있는 위치를 반환하는 메서드

.indexOf() .indexOf()는 특정 문자열이 처음으로 나타나는 위치를 반환하는 메서드입니다. 문법 string.indexOf( value, start ) value : 필수 요소입니다. 찾으려는 문자열을 넣습니다. start : 선택 요소입니다. 검색을 시작할 인덱스 값입니다. 입력하지 않으면 처음부터 검색합니다. 대소문자를 구분합니다. 찾는 문자열이 없는 경우 -1을 반환합니다. 예제 'ABCABC'.indexOf( 'A' ) 처음 나오는 A의 인덱스의 값인 0을 반환합니다. 'ABCABC'.indexOf( 'A', 1 ) 인덱스 1 이후에 처음 나오는 A의 ...

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

JavaScript / Object / Element.removeAttribute() / 요소의 속성을 제거하는 메서드

.removeAttribute() .removeAttribute()는 요소의 속성을 제거하는 메서드입니다. 문법 element.removeAttribute( attributename ) 예를 들어 document.getElementsByTagName( 'h1' ).removeAttribute( 'class' ); 는 문서의 첫번째 h1 요소의 class 속성을 제거합니다. 예제 첫번째 h1 요소의 class 속성을 제거해서 글자색이 검정색이 됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> body { font-family: Consolas, monospace; } .abc { color: red; } </style> </head> <body> <h1 class="abc">Lorem ...

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 / Object / document.URL / 문서의 URL을 반환하는 속성

JavaScript / Object / document.URL / 문서의 URL을 반환하는 속성

.URL .URL 속성으로 문서의 URL을 가져올 수 있습니다. 문법 document.URL 예제 문서의 URL을 출력합니다. <!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>document.URL : " + document.URL + "</p>" ); </script> </body> </html> JavaScript / Object / Location - URL 정보 가져오는 객체

JavaScript / Object / String.toUpperCase(), String.toLowerCase()

JavaScript / Object / String.toUpperCase(), String.toLowerCase()

.toUpperCase() 문법 .toUpperCase()는 대문자로 변환하는 메서드이다. 예를 들어 다음은 ABC를 반환한다. 'abc'.toUpperCase() 예제 1 - 대문자로 변환하여 출력 문자열 Aaa를 대문자로 변환하여 출력한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>JavaScript</title> <style> * { font-family: ...