이미지 로드를 지연시키는 코드를 작성해 봅시다.
● 이미지 로드 중 상태를 표시하고자 할 때 사용
● 이미지를 읽은 후 이미지 데이터에 액세스하고자 할 때 사용
웹페이지의 이미지 로드를 지연하려면 DomContentLoaded 이벤트에서 img 요소 data-src 속성의 값을 Map에 유지한 후 요소의 속성 값을 비워야 합니다.
. 로드하고 싶을 때에 Map 에 보관 유지한 값을 src 속성에 넣어 작업을 처리합니다.
해당 작업을 사용하여 버튼을 클릭할 때 이미지를 로드할 샘플을 확인합니다.
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!
DOCTYPE html> <html lang=“ko”>
<머리>
<meta charset=“utf-8”/>
<title>샘플</title>
<메타 이름=“viewport” 콘텐츠=“width=device-width, initial-scale=1.0”/>
<링크 rel=“스타일 시트” href=“../../common/css/style.css”/>
<링크 rel=“스타일 시트” href=“style.css”/>
<script src=“main.js” defer></script>
</머리>
<body 수업=“chapter-11”>
<메인 수업=“centering”>
<p>
<img data–src=“images/photo_a.jpg”
width=‘320’
height=214/>
<img data–src=“images/photo_b.jpg”
width=‘320’
height=214/>
</p>
<버튼 수업=“btn”>이미지 로드</버튼>
</메인>
</body>
</html>
|
cs |
자바스크립트
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
// 데이터를 아카이브하기 위한 맵
const srcMap = 새로운 Map();
창.addEventListener(‘DOMContentLoaded’() => {
// 모든 img 요소 참조
const imgs = 문서.querySelectorAll (‘img’);
imgs.forEach ((img) => {
// 각 img 요소 data-src 속성을 Map에 유지
srcMap.set(img, img.dataset.src);
// 로드를 지연시키기 위해 요소의 속성을 삭제합니다.
콘솔.log(img.dataset.src);
img.removeAttribute (‘src’);
});
});
const btn = 문서.querySelector (‘.btn’);
btn.addEventListener(‘클릭’() => {
// 모든 img 요소 참조
const imgs = 문서.querySelectorAll (‘img’);
imgs.forEach ((img) => {
// Map에 보유한 값을 src 속성에 할당
const 소스 = srcMap.get(img);
img.src = source;
});
});
|
cs |
클릭 전
클릭 후
