[JavaScript] 오프스크린 이미지(Offscreen Images) 지연하기
페이지 정보
shadow2fox
4,147 2
2018.12.27 23:38:05
짧은주소
-
https://yadolee.com/tip/613 주소복사
본문
오프스크린 이미지(Offscreen Images) 지연하기
구글 PageSpeed Insights를 통해 웹페이지를 분석해 보면 오프스크린 이미지(Offscreen Images) 지연하기를 통해 페이지 로드 속도를 높일 수 있다고 제시해 주는데 메인 홈이나 페이지 이미지(최신글)에 적용해서 로드 속도를 증가시켜 보자.
상기 스크립트와 함께 최신글 이미지 경로의 src를 data-src로 교체한다
수정 예제 전
<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
-
내사랑
- 비회원
레벨 155
경험치 3,587,024
Progress Bar 14.04%
- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은
자기 자신에게 기회를 주는 것이다.
- 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.
-
[자유 게시판] 무려 20년이란 시간이 지났군요 추억 돋는 영상입니다{이모티콘:missbone-078}2026-02-21
-
[자유 게시판] 무엇보다 건강하시고 어제 보다 나은 오늘, 오늘 보다 나은 내일을 위해 그렇게 행복함이 넘쳐나시길 기원드립니다 새해 복 많이 받으세요2026-02-16
-
[생활 정보] 15원 추가 적립이 있네요 https://campaign2.naver.com/npay/v2/click-point/?eventId=cr_2026012802_2602_01772026-02-10
-
[생활 정보] 15원 줍줍 아직 수확 전이시면 체크해 보세요 https://campaign2.naver.com/npay/v2/click-point/?eventId=cr_2026012802_2602_01272026-02-07
-
[생활 정보] 가격이 착하다 싶더니 할인이 사라지고 일반가 30,900원으로 판매하네요2026-01-28
-
[일일 메모장] 안타까운 소식입니다. 민주 진영의 거목이였던 이해찬 전 대표님 정말 고생 많으셨습니다. 이제 편히 쉬십시오.2026-01-25
-
[자유 게시판] 올 한 해도 잘 부탁드립니다. 새해 복 많이 받으세요.2026-01-06
-
[일일 메모장] 무슨 말이 필요할까요 삼가 조의를 표하며 고인의 명복을 빕니다 영면하세요2026-01-05
댓글
첫 번째 댓글을 남겨 주세요