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

페이지 정보

shadow2fox 3,390 2 2018.12.27 23:38

평점

  • 평점 : 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
  • 내사랑
  • 비회원
10
shadow2fox - 회원등급 : 자연/Level 143 - 포인트 : 2,545,999
레벨 143
경험치 3,045,965

Progress Bar 1%

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

댓글

첫 번째 댓글을 남겨 주세요

Total 7471238 페이지
제목 글쓴이 날짜 조회 추천
이윰  🏆 무한스크롤을 사용하는 게시판에서 검색시 나타나는 버그 수정하기 루루아빠 2015.08.17 2,889 0
그누•영카트  🏆 영카트 5.2.9.6 패치 루루아빠 2017.11.21 2,887 0
에디터  🏆 CKeditor4.x 글 작성시 스페이스 공란이 &nbsp; 로 자동으로 변경되는 문제 해결 루루아빠 2016.11.06 2,886 1
이윰  🏆 상단바 특정 메뉴 레벨에 따라 감추기 루루아빠 2015.05.22 2,883 0
이윰  🏆 특정 Div 클래스 전체를 링크 걸기 루루아빠 2017.04.29 2,883 0
이윰  🏆 이윰 레벨업 관련 push(푸시) 메세지 오류 루루아빠 2015.06.15 2,875 0
이윰  🏆 "카테고리"별 게시글 갯수 나타내기 루루아빠 2015.04.24 2,873 1
그누•영카트  🏆 이미지만 오른쪽 마우스 버튼 금지 루루아빠 2015.05.20 2,863 1
그누•영카트  🏆 영카트 5.2.9.1 루루아빠 2017.07.25 2,859 0
이윰  🏆 Eyoom Builder 1.1.8 패치 루루아빠 2015.07.24 2,858 0
이윰  🏆 댓글에 이미지가 추가된 댓글을 수정할 경우 이미지가 삭제되는 버그 패치 루루아빠 2015.08.07 2,857 0
제로  🏆 자동링크 개선 루루아빠 2005.06.16 2,849 0
이윰  🏆 사이드바 없애기 루루아빠 2015.04.22 2,848 1
이윰  댓글+1🏆 Eyoom Builder 1.1.1 패치 루루아빠 2015.05.24 2,847 0
그누•영카트  🏆 그누보드 5.1.2 패치 루루아빠 2015.10.11 2,846 0
그누•영카트  🏆 영카트 5.1.11 패치 루루아빠 2016.01.10 2,846 0
이윰  🏆 샵커뮤니티 테마 스위쳐 패치 루루아빠 2015.06.25 2,846 0
제로  🏆 최근 갤러리 & 갤러리 목록 이미지 흑백 설정 루루아빠 2005.07.20 2,845 0
그누•영카트  🏆 회원 닉네임 길이 제한두기 루루아빠 2015.03.28 2,845 0
이윰  🏆 반응형 이미지를 위한 태그 루루아빠 2015.04.29 2,845 1