[JavaScript] 오프스크린 이미지(Offscreen Images) 지연하기

페이지 정보

shadow2fox 3,329 2 2018.12.27 23:38

평점

본문

오프스크린 이미지(Offscreen Images) 지연하기
구글 PageSpeed Insights를 통해 웹페이지를 분석해 보면 오프스크린 이미지(Offscreen Images) 지연하기를 통해 페이지 로드 속도를 높일 수 있다고 제시해 주는데 메인 홈이나 페이지 이미지(최신글)에 적용해서 로드 속도를 증가시켜 보자.


<script type="text/javascript">
function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i=0; i<imgDefer.length; i++) {
        if(imgDefer[i].getAttribute('data-src')) {
            imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
        }
    }
}
window.onload = init;
</script>

상기 스크립트와 함께 최신글 이미지 경로의 src를 data-src로 교체한다

수정 예제 전

<img src="이미지 주소" alt="오프스크린 이미지(Offscreen Images) 지연하기" />
수정 예제 후

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="이미지 주소" alt="오프스크린 이미지(Offscreen Images) 지연하기" />
추천인 2
  • 내사랑
  • 비회원
10
shadow2fox - 회원등급 : 자연/Level 142 - 포인트 : 2,533,042
레벨 142
경험치 3,022,469

Progress Bar 45%

- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은 자기 자신에게 기회를 주는 것이다. - 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.

댓글

첫 번째 댓글을 남겨 주세요