[JavaScript] 오프스크린 이미지(Offscreen Images) 지연하기
페이지 정보
shadow2fox
3,930 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
-
내사랑
- 비회원
레벨 148
경험치 3,275,951
Progress Bar 28.27%
- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은
자기 자신에게 기회를 주는 것이다.
- 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.
-
[자유 게시판] 그러게나 말입니다{이모티콘}2025-09-19
-
[자유 게시판] 루루맘은 실시간으로 아메리카 퍼스트 필드 경기장에서 직관하셨더랍니다 매년 이맘때면 미국에 비지니스 겸 여행 중이신데 솔트레이크시티가 주무대시라2025-09-19
-
[자유 게시판] 89세 나이시라 어쩌면 급작스러운 소식은 아니더라도 한없이 나약한 인간이기에 떠나는 이와 남겨진 이 나 또한 선택되어진다는 걸 깨닫게 됩니다.2025-09-17
-
[Web Server Tip] 저 또한 불편하단 느낌이 한동안 들었는데 막상 내려놓고 작업하니 시간이 소모될 뿐 문제될 건 없었습니다 차분하게 작업해 보세요{이모티콘}2025-09-10
-
[Web Server Tip] 패치할 양이 제법 많지만 그 기능을 사용하지 않더라도 충돌이 있다거나 하진 않았습니다 참고하세요2025-09-09
-
[이슈와 관심] 정경심 동양대 표창장 위조 판결 뒤집는 새로운 증거 나와 https://youtu.be/1ni0YkMIidM2025-08-13
-
[이슈와 관심] 외국 기사도 참고하셨음 좋겠습니다 {글}2025-07-18
-
[일일 메모장] 공감되는 말씀입니다2025-06-03
댓글
첫 번째 댓글을 남겨 주세요