[JavaScript] 오프스크린 이미지(Offscreen Images) 지연하기
페이지 정보
shadow2fox
4,131 2
2018.12.27 23:38:05
짧은주소
-
https://yadolee.com/tip/613 주소복사
본문
오프스크린 이미지(Offscreen Images) 지연하기
구글 PageSpeed Insights를 통해 웹페이지를 분석해 보면 오프스크린 이미지(Offscreen Images) 지연하기를 통해 페이지 로드 속도를 높일 수 있다고 제시해 주는데 메인 홈이나 페이지 이미지(최신글)에 적용해서 로드 속도를 증가시켜 보자.
{code:js}
<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>
{/code}
상기 스크립트와 함께 최신글 이미지 경로의 src를 data-src로 교체한다
수정 예제 전
{code:html}
<img src="이미지 주소" alt="오프스크린 이미지(Offscreen Images) 지연하기" />
{/code}수정 예제 후{code:html}
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="이미지 주소" alt="오프스크린 이미지(Offscreen Images) 지연하기" />
{/code}
{code:js}
<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>
{/code}
상기 스크립트와 함께 최신글 이미지 경로의 src를 data-src로 교체한다
수정 예제 전
{code:html}
<img src="이미지 주소" alt="오프스크린 이미지(Offscreen Images) 지연하기" />
{/code}수정 예제 후{code:html}
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="이미지 주소" alt="오프스크린 이미지(Offscreen Images) 지연하기" />
{/code}
추천인 2
-
내사랑
- 비회원
레벨 154
경험치 3,576,436
Progress Bar 91.21%
- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은
자기 자신에게 기회를 주는 것이다.
- 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.
-
[좋은 생각] 자기를 아는 사람2026-02-02
-
[좋은 생각] 애쓰지 않고 편안하게2026-02-02
-
[좋은 생각] 천성적으로 타고나지 않았더라도 마음을 다해 내 것으로 만들 수 있는 것2026-02-02
-
[좋은 생각] 표를 세는 사람이 모든 것을 결정한다2026-02-02
-
[좋은 생각] 희망 도토리2026-02-02
-
[좋은 생각] 자유는 먹고사는 게 다 해결되고 나서야 시작됩니다2026-02-02
-
[생활 정보] [판매중] 햇반 윤기가득쌀밥 210g 24입 (1박스) (20,900원 / 무료)2026-02-02
-
[생활 정보] [판매중] 실속형 신고배 4.5kg 중대과(7-9과 내외) (10,740원 / 무료)2026-02-02
-
[생활 정보] 가격이 착하다 싶더니 할인이 사라지고 일반가 30,900원으로 판매하네요2026-01-28
-
[일일 메모장] 안타까운 소식입니다. 민주 진영의 거목이였던 이해찬 전 대표님 정말 고생 많으셨습니다. 이제 편히 쉬십시오.2026-01-25
-
[자유 게시판] 올 한 해도 잘 부탁드립니다. 새해 복 많이 받으세요.2026-01-06
-
[일일 메모장] 무슨 말이 필요할까요 삼가 조의를 표하며 고인의 명복을 빕니다 영면하세요2026-01-05
-
[생활 정보] 이번 년도도 잘 정리해 주셨네요 감사드립니다2026-01-01
-
[자유 게시판] 새해 맞기 전 마지막 날을 좀 더 멋지게 보내고 싶은데 늘 마음 뿐이네요 활기차고 신난 새해로 시작되시길 빌어요 올 한 해도 화이팅입니다2026-01-01
-
[자유 게시판] 메리 크리스마스 행복이 넘쳐 흘러 기쁨을 만끽하는 하루 그런 날 되세요2025-12-25
-
[자유 게시판] 1990년대를 살았던 우리들의 꽃피던 시절은 시끌벅쩍하고 그토록 화려했던 것 같습니다. 세상에 맞선 용기는 사라지고 조심성만 커져 버린 오늘의 삶이지만 어제보다 더 나은 오늘, 오늘 보다 더 나은 미래를 그리는 그런 삶을 그려 나가길 기원합니다. 메리 크리스마스! 행복한 성탄절되세요!!2025-12-24
댓글
첫 번째 댓글을 남겨 주세요