[JavaScript] 오프스크린 이미지(Offscreen Images) 지연하기
페이지 정보
shadow2fox
3,796 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
-
내사랑
- 비회원
레벨 147
경험치 3,234,449
Progress Bar 34.36%
- 가입일 : 2015-03-10 12:21:44
- 서명 : 인간에게 가장 큰 선물은
자기 자신에게 기회를 주는 것이다.
- 크리스 가드너, Chris Gardner -
- 자기소개 : There's never a shortcut to happiness.
-
[일일 메모장] 공감되는 말씀입니다2025-06-03
-
[일일 메모장] 그 어떤 후보도 내게 직접적인 득이 될 수 없다면 내 친지와 내 이웃에게 득이 될 것 같은 후보를 뽑으시고 여러모로 따져 보고 헤아려 보아도 그런 자질을 갖춘 이를 찾을 수 없다면 내 나라에 더 득이 되어 줄 후보를 뽑으셨으면 좋겠습니다 어쩌면 내 코가 석 자라는 말도 자유가 없다면 배 부른 소리 일 수 있습니다 어느 개념있는 배우에 대한 기사로 갈음하고 싶습니다 {글} 꼭 소중한 투표 행사하셨으면 합니다2025-06-03
-
[자유 게시판] 저 또한 소중한 하나 표를 행사하려 합니다 좋은 결과를 기대하고 싶습니다2025-06-03
-
[이슈와 관심] 29일 시청했으나 이제서야 댓글을 답니다 속이 타들어가는 느낌과 메스꺼움 그리고 온전치 않은 정신에 불편한 감정을 다스릴 수 없는 시기라 무슨 말을 피력하기가 참 어렵습니다 당분간은 이 상태일 듯 하네요 그럼에도 불구하고 뉴스타파의 노고에 박수를 보냅니다2025-06-01
-
[이슈와 관심] 미약하나마 동참했습니다2025-05-04
-
[생활 정보] 음 180원 다른 운을 기대해봐야겠네요2025-04-26
-
[생활 정보] 나라가 혼돈의 시기를 겪다 보니 봄을 만끽할 겨를 조차 느낄 수 없었네요 정보 감사합니다2025-04-07
-
[생활 정보] 새해 복 많이 받으십시오2025-01-31
댓글
첫 번째 댓글을 남겨 주세요