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

페이지 정보

shadow2fox shadow2fox 3,819 2 2018.12.27 23:38:05

평점

  • 평점 : 0점 (0명 참여)

본문

오프스크린 이미지(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
  • 012i1052u
    내사랑
  • 비회원
shadow2fox
10
shadow2fox - 회원등급 : 자연/Level 147 - 포인트 : 2,613,648
레벨 147
경험치 3,240,032

Progress Bar 47.02%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 762826 페이지

제목 글쓴이 날짜 조회 추천
그누•영카트  🏆 영카트 5.3.2.9 shadow2fox 2019.05.30 11,938 0
그누•영카트  🏆 그누보드 5.3.2.9 shadow2fox 2019.05.30 1,893 0
이윰  댓글+1🏆 마이홈과 마이페이지에서 사이드바 사용하지 않기 shadow2fox 2019.05.26 2,270 1
이윰  댓글+2🏆 본문 내 첨부된 이미지와 에디터로 업로드한 이미지 갯수 구하기 shadow2fox 2019.05.12 2,171 1
이윰  🏆 내글반응 페이지 내 전체 선택 체크박스 올바르게 적용하기 shadow2fox 2019.05.06 2,269 0
이윰  🏆 게시글 보기시 본문에 포함된 주석 감추기 shadow2fox 2019.05.01 2,086 0
이윰  댓글+1🏆 현재 게시글 스크랩 갯수 본문에 보여주기 shadow2fox 2019.04.28 2,524 2
그누•영카트  🏆 영카트 5.3.2.8.1 shadow2fox 2019.04.23 2,237 0
이윰  🏆 Eyoom Builder 3.0.9 패치 shadow2fox 2019.03.25 2,733 0
그누•영카트  🏆 영카트 5.3.2.8 shadow2fox 2019.03.19 2,429 0
그누•영카트  🏆 그누보드 5.3.2.8 shadow2fox 2019.03.19 2,047 0
이윰  댓글+2🏆 출석부 선착순 포인트 올바르게 적용하기 shadow2fox 2019.03.16 2,595 2
이윰  댓글+1🏆 게시글 추천시 글 작성자에게 포인트 부여하기 shadow2fox 2019.03.15 2,124 1
이윰  댓글+1🏆 Eyoom Builder 3.0.8 패치 shadow2fox 2019.03.12 2,590 1
이윰  댓글+1🏆 카카오TV 플레이어 최신 버전 재생 오류 해결하기 shadow2fox 2019.03.11 3,067 1
그누•영카트  🏆 영카트 5.3.2.7 shadow2fox 2019.03.05 2,153 0
그누•영카트  🏆 그누보드 5.3.2.7 shadow2fox 2019.03.05 1,861 0
그누•영카트  🏆 영카트 5.3.2.6 shadow2fox 2019.02.15 2,090 0
그누•영카트  🏆 그누보드 5.3.2.6 shadow2fox 2019.02.15 2,239 0
이윰  댓글+1🏆 팝업창 페이지에서도 띄우기 shadow2fox 2019.02.05 2,327 1
그누•영카트  🏆 영카트 5.3.2.5 shadow2fox 2019.01.29 2,481 0
그누•영카트  🏆 그누보드 5.3.2.5 shadow2fox 2019.01.29 2,179 0
이윰  댓글+1🏆 관리자는 쪽지 보낼 때 캡챠코드 적용하지 않기 shadow2fox 2019.01.10 2,711 1
그누•영카트  🏆 영카트 5.3.2.4 shadow2fox 2019.01.08 2,301 0
그누•영카트  🏆 그누보드 5.3.2.4 shadow2fox 2019.01.08 2,172 0
이윰  🏆 PHP 7.x에서 이윰빌더 알람 푸시(push) 관련 PHP Notice: Undefined index error 해결하기 shadow2fox 2019.01.01 2,519 0
그누•영카트  🏆 영카트 5.3.2.3 shadow2fox 2018.12.29 2,317 0
그누•영카트  🏆 그누보드 5.3.2.3 shadow2fox 2018.12.28 2,166 0
JavaScript  🏆 🚩 오프스크린 이미지(Offscreen Images) 지연하기 shadow2fox 2018.12.27 3,820 2
JavaScript  🏆 현재창 아이프레임 유무 확인 shadow2fox 2018.12.26 2,010 0