[JavaScript] 오프스크린 이미지(Offscreen Images) 지연하기
페이지 정보
shadow2fox
3,351 2
2018.12.27 23:38
짧은주소
-
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
-
내사랑
- 비회원
레벨 142
경험치 3,031,172
Progress Bar 66%
- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은
자기 자신에게 기회를 주는 것이다.
- 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.
-
[좋은 생각] 사람의 뇌2024-04-19
-
[좋은 생각] 모든 사람이 장미일 필요는 없다2024-04-19
-
[좋은 생각] 지금껏 감고 있던 한쪽 눈을 뜰 수 있는 절호의 기회2024-04-19
-
[좋은 생각] 머물지 마라 그 아픈 상처에2024-04-19
-
[좋은 생각] 사람들은 누구나 스스로 판단하기보다는 남의 말을 그냥 믿으려고 한다2024-04-19
-
[골라먹는 요리] 빨간 어묵2024-04-19
-
2 [Web Server Tip] 그누보드(영카트) 5.5.16+22024-04-18
-
1 [짤방 게시판] 이소무라 미우 - 주간 플레이보이 2024 No.8•92024-04-13
-
[자유 게시판] 부활 곡에 잘 어울릴 듯 한 보이스 컬러네요 동감입니다2024-03-31
-
[생활 정보] 80원의 행복이네요{이모티콘}2024-03-21
-
[자유 게시판] 같은 의견이에요2024-03-14
-
[자유 게시판] 다시 봐도 감동입니다{이모티콘}2024-03-11
-
[자유 게시판] 제가 라이브 시청을 하지 않아야 대활약을 해서 손흥민 선수를 위해 안타깝지만 자제 중입니다{이모티콘} 반더벤 또한 너무 잘하지 않았나 싶었네요2024-03-03
-
[자유 게시판] 하늘구장님 늘 감사드리며 마음을 담아 새해 인사를 전합니다 새해 복 많이 받으세요2024-02-09
-
[이슈와 관심] 최소 누군가는 가학 대통령으로 기억할 것 같습니다2024-01-29
-
[이슈와 관심] {글:링크} 배추도 매출도 아닌 배출로 들려서... 한동안 또 시끄러울 것 같습니다.2024-01-28
댓글
첫 번째 댓글을 남겨 주세요