하루 하루
Lazy Loading 본문
이미지 및 동영상의 지연 로딩 | Web Fundamentals | Google Developers
사이트에 수많은 이미지와 동영상이 있지만 이를 줄이고 싶지 않다면, 지연 로딩이 초기 페이지 로드 시간을 향상하고 페이지당 페이로드를 낮추는 데 가장 적합한 기술일 수 있습니다.
developers.google.com
Lazy Loading은 간단히 페이지 로드 시간에 중요하지 않은 리소스의 로딩을 늦추는 기술이라고 할 수 있습니다.
지연 로딩은 사용자에게 보여지지않는 이미지나 동영상을 로딩하면서 낭비되는 데이터, 처리 시간, 배터리 등의 낭비를 감소시켜줍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title> Lazy Loading </title>
</head>
<body>
<div class="row">
<div class="col-md-3">
<img src="loader.gif" class="img-thumbnail" data-img="1.jpg" alt="" style="width: 100px">
</div>
<div class="col-md-3">
<img src="loader.gif" class="img-thumbnail" data-img="2.jpg" alt="" style="width: 100px">
</div>
<div class="col-md-3">
<img src="loader.gif" class="img-thumbnail" data-img="3.jpg" alt="" style="width: 100px">
</div>
</div>
<script>
function init( ){
var imageDefer = document.getElementsByTagName("img");
for(var i = 0 ; i < imageDefer.length ; i++){
if(imageDefer[i].getAttribute('data-img')){
imageDefer[i].setAttribute('src',imageDefer[i].getAttribute('data-img'))
}
}
}
window.onload = init;
</script>
</body>
</html>* window.onload 속성은 문서의 모든 콘텐츠가 로드된 후에 발생하는 이벤트
window.onload = init;해당 script코드를 보면 window.onload 이벤트가 발생한 경우, 즉 모든 콘텐츠가 로드가 되면 init( ) 함수를 실행한다.
그렇기 때문에 해당 페이지 속 이미지들은 loader.gif 이미지로 우선 보여지게 된다.
이후 init ( ) 함수가 실행되면서 원래 페이지에 보이고자 했던 이미지들을 보여주게 된다.
init ( )의 코드를 보면
var imageDefer = document.getElementsByTagName("img");를 통해서 img 태그 아이템들을 imageDefer에 저장하게 된다.
for(var i = 0 ; i < imageDefer.length ; i++){
}다음으로 , for 문을 통해서 imageDefer 속 이미지들을 하나씩 가져오게 된다.
if(imageDefer[i].getAttribute('data-img')){
imageDefer[i].setAttribute('src',imageDefer[i].getAttribute('data-img'))
}imageDefer의 이미지의 data-img의 속성이 있다면 (= if(imageDefer[i].getAttribute('data-img')) )
imageDefer의 이미지의 src 속성을 data-img 속성의 값으로 설정한다. ( =
imageDefer[i].setAttribute('src',imageDefer[i].getAttribute('data-img')))
'IT > Web' 카테고리의 다른 글
| [ SharePoint Framework ] 1. Overview (0) | 2020.05.31 |
|---|---|
| 미디어 쿼리 + 플렉서블 박스 레이아웃 (0) | 2020.05.18 |
| 모달 창 만들기 js (0) | 2020.05.17 |
| 모듈 형태의 JS (0) | 2020.05.17 |
| [ JS 33 Concept ] 1. 호출스택 (0) | 2020.05.14 |
